javascript - 切换 block 的显示

Question

我有一个表...每个 < tr> 有一个 class=opt_NS1 的 div，对于每个 tr，我都有一个 class=d4_0I_oL_vJ 的链接，用户点击该链接，就会显示 class=opt_NS1 的 的 div。 ..

这是表格的示例

<tr><a class="d4_0I_oL_vJ"></a><div class="opt_NS1"></div></tr>
<tr><a class="d4_0I_oL_vJ"></a><div class="opt_NS1"></div></tr>
<tr><a class="d4_0I_oL_vJ"></a><div class="opt_NS1"></div></tr>
<tr><a class="d4_0I_oL_vJ"></a><div class="opt_NS1"></div></tr>
<tr><a class="d4_0I_oL_vJ"></a><div class="opt_NS1"></div></tr>
<tr><a class="d4_0I_oL_vJ"></a><div class="opt_NS1"></div></tr>

现在我编写了这段代码，以便“class="opt_NS1"”在点击时出现...

jQuery('.d4_0I_oL_vJ').on('click', function (evt) {
    var $button = jQuery(this);
    var $tr = $button.parents('tr');
    var $div = $tr.find('.opt_NS1');
    $div.toggle();
});

但是我遇到的问题是，当我单击一个链接时，div 会正常显示，但如果我单击另一个 tr 中的另一个链接，该 tr 的新 div 也会出现，但打开的旧 div 仍然打开...当单击 tr 的链接时，如何才能隐藏其他“class=opt_NS1”div...

有人可以帮我解决这个问题吗？谢谢

Answer 1

尝试

jQuery('.d4_0I_oL_vJ').on('click', function (evt) {
    var $button = jQuery(this);
    var $tr = $button.closest('tr');//better change here to closest
    var $div = $tr.find('.opt_NS1');//current div
    jQuery('.opt_NS1').not($div).hide(); //hide all other div's not the current one
    $div.toggle();
});

.not()

.closest()