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 - 使用泛型函数查找最接近的匹配项

2 个答案: