用jquery选择多个实例

Question

我有这个jQuery语句：

$(document).ready(function() {
$('#toggle-link').click(function(){
$(this).text($(this).text() == '+' ? '-' : '+');
 $('#box-to-toggle').toggle();

});
});

我有＃box-to-toggle的几个实例，所以当我点击#toogle链接链接时，该框的每个实例都会打开和关闭。任何人都可以告诉我如何解决这个问题，所以链接只打开同一个div中的框。这是html结构。

<div id='holder'>
    <div id='toggle-link'>+</div>
    <div id='box-to-toggle'>
        <!-- hide / show content here -->
    </div>
</div>
<div id='holder'>
    <div id='toggle-link'>+</div>
    <div id='box-to-toggle'>
        <!-- hide / show content here -->
    </div>
</div>
<div id='holder'>
    <div id='toggle-link'>+</div>
    <div id='box-to-toggle'>
        <!-- hide / show content here -->
    </div>
</div>
<div id='holder'>
    <div id='toggle-link'>+</div>
    <div id='box-to-toggle'>
        <!-- hide / show content here -->
    </div>
</div>

任何帮助都是适用的

Answer 1

多个ID对您的健康有害，因此请将其更改为classNames。然后：

$(this).parent().find(".box-to-toggle").toggle();

Answer 2

在标记中看到有一些ID在一个页面中实例化为多个元素。有多个#holder, #toggle-link和#box-to-toggle。

如果您将 id 表示法更改为 class ，这样会更好，因此您的标记现在应该将ID更改为类：

<div class='holder'>
   <div class='toggle-link'>+</div>
   <div class='box-to-toggle'>
       <!-- hide / show content here -->
   </div>
</div>
.....more divs......

和jQuery只做一次更改，不要使用类名切换div，而是可以使用.next(), .siblings()：

.next()：

$('.toggle-link').click(function () {
   var $this = $(this);
   $this.text($this.text() == '+' ? '-' : '+');
   $this.next('.box-to-toggle').toggle();
});

.siblings()：

$('.toggle-link').click(function () {
   var $this = $(this);
   $this.text($this.text() == '+' ? '-' : '+');
   $this.siblings('.box-to-toggle').toggle();
});

和# id表示法更改为.附加标记。

Answer 3

正如所有答案所示，请始终使用唯一的id并使用class代替id来解决您提出的当前问题：

$('.toggle-link').click(function () {
    $(this).text($(this).text() == '+' ? '-' : '+');
    $(this).next("div.box-to-toggle").toggle();
});

Answer 4

使其发挥作用的一种方法是：

$(document).ready(function() {
    $('#toggle-link').click(function(){
        var $this = $(this);
        $this
            .text($this.text() == '+' ? '-' : '+')
            .siblings('#box-to-toggle').toggle();
    });
});

顺便说一句。我不认为多个元素共享相同的ID是个好主意。使用一个类对我来说更合乎逻辑。