jquery - 使用 jquery 选择多个实例

Question

我有这个 jQuery 语句：

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

});
});

我有几个#box-to-toggle 实例，因此当我单击#toogle-link 链接时，该框的每个实例都会打开和关闭。谁能告诉我如何解决这个问题，所以链接只打开同一个 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 更改为 class：

<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 不是一个好主意。使用类对我来说更合乎逻辑。