jQuery

Question

我有一个界面，可以通过单击插入符号图标来切换帮助的显示。以前，我使用硬编码 ID 选择和切换；现在，相反，我正在尝试编写一个通用函数来处理所有事情。这是我的 DOM:

的示例

<h3 class="box-header">Step 1</h3>
<i class="fa fa-caret-down help-toggle" data-toggle="tooltip" title="Click for help"></i>
<div class="box-body">
    <div class="row">
        <div class="col-md-12">
            <p class="help-text" style="display:none;">This is help for Step 1</p>
        </div>
    </div>
</div>

<h3 class="box-header">Step 2</h3>
<i class="fa fa-caret-down help-toggle" data-toggle="tooltip" title="Click for help"></i>
<div class="box-body">
    <div class="row">
        <div class="col-md-12">
            <p class="help-text" style="display:none;">This is help for Step 2</p>
        </div>
    </div>
</div>

我编写的 jQuery 函数部分起作用，因为它找到帮助文本并切换其显示；但是，它会同时切换所有帮助文本。我希望它只切换最近的帮助文本。这是函数：

$('.help-toggle').click(function () {
    $(this).toggleClass('fa-caret-up fa-caret-down');
    $(this).closest('.row').find('.help-text').slideToggle("fast");
});

我四处搜索并找到了 this 有用的文章，但我仍然遗漏了一些东西。有任何想法吗？提前致谢！

Answer 1

变化：

$(this).closest('.row').find('.help-text').slideToggle("fast");

至：

$(this).next('div.box-body').find('.help-text').slideToggle("fast");

.closest() 向上搜索 DOM，您想要 help-toggle 元素之后的节点。

jsFiddle example

Answer 2

尝试使用 .first()

$('.help-toggle').click(function () { $(this).toggleClass('fa-caret-up fa-caret-down'); $(this).closest('.row').find('.help-text').first().slideToggle("fast"); });

jQuery - 使用通用函数查找最近的匹配项

jQuery - Finding nearest match using a generic function

dom-traversal