jquery - 动态 jQuery 选择器，变量问题

Question

我只是想制作一个问题列表，其中包含点击后显示的隐藏答案。我的代码隐藏了所有 div，但是当我单击 anchor 时，只有最后一个框被切换。在这种情况下，每个 anchor 都会切换第五个框，而不是它们自己的框。

for(var i=1; i<6; i++){
    var x = i+"";
    $("#box"+ x).hide();
    $("#feature"+x).click(function(){
        $("#box"+x).toggle(400);
    });
}

我的基本 HTML 看起来像这样，但有 5 对:

<p><a id="feature1" href="#">1. Absent Message</a></p>
<div id="box1">Stuff here 1</div>
<p><a id="feature2" href="#">2. Alarm Setting</a></p>
<div id="box2">Stuff here 2</div>

如果我在不使用 for 循环和字符串连接的情况下编写函数，这些函数就会执行我想要的操作。有人能指出我正确的方向吗？我在字符串操作方面做错了什么吗？

Answer 1

你的问题是 x 在循环的所有个副本之间共享，所以最终它总是5，并且当在点击时附加时，$("#box"+x) 将始终为 $("#box5")。更简单的方法是类，如下所示:

<p><a class="feature" href="#">1. Absent Message</a></p>
<div class="box">Stuff here 1</div>

然后相对查找，如下所示:

$(".box").hide();
$(".feature").click(function() {
  $(this).parent().next(".box").toggle(400);
});

如果这不是一个选项，您需要为循环提供必要的范围，如下所示:

for(var i=1; i<6; i++){
  (function(x) {
    $("#box"+ x).hide();
    $("#feature"+x).click(function(){
      $("#box"+x).toggle(400);
    });
  })(i);
}

通过这样做，我们将 i 传递到匿名函数中，该函数获取其自己名为 x 的副本，而不是共享变量范围到 for 循环所在的任何函数(这就是当前正在发生的情况)。