Question

我有一系列来自把手模板的重复结果，导致：

<div class="checkboxes"><input type="checkbox" class="Btn1"></div>
<div class="checkboxes"><input type="checkbox" class="Btn2"></div>
...more checkboxes
<div class="div1" style="display:none;">...lots of divs...</div>
<div class="div2" style="display:none;">...lots of divs...</div>
<div class="div3" style="display:none;">...lots of divs...</div>
...more divs

<div class="checkboxes"><input type="checkbox" class="Btn1"></div>
<div class="checkboxes"><input type="checkbox" class="Btn2"></div>
...more checkboxes
<div class="div1" style="display:none;">...lots of divs...</div>
<div class="div2" style="display:none;">...lots of divs...</div>
<div class="div3" style="display:none;">...lots of divs...</div>
...more divs

...

目前有这个jQuery，但它会打开所有的div1或div2等。

$(document).on("change",".Btn1",function () {
    var $that = $(".div1");
    $that.slideToggle();
    $("#Btn2").removeClass("active");
    $("#Btn3").removeClass("active");
    $(".div1").not($that).slideUp();
    $(".div2").not($that).slideUp();
    $(".div3").not($that).slideUp();
});

尝试了var $that = $(this).next(".div1");任何建议的一些变体？

Answer 1

尝试

var $that = $(this).next(".div1");

由于你有很多Btn1，行$（“＃Btn1”）。next（“。div1”）将匹配第一个Btn1并获得下一个div1。通过使用$（this）代替，您只需定位单击的按钮并获取下一个div1。

编辑：正如其他人所指出的，每个元素都应该有一个唯一的ID。最好在按钮上使用一个类，然后定位类而不是ID。有关jquery和多个ID的更多信息，请参阅此内容 - https://stackoverflow.com/a/8498617/853295

Answer 2

首先，尝试只使用一个具有特定ID的元素。

其次，试试：

var $that = $(this).nextAll('.div1:first')

如何使用jQuery遍历来定位许多重复元素中的一个？

2 个答案: