Question

我只是想点击一下隐藏答案的问题列表。我的代码隐藏了所有div，但是当我单击锚点时，只切换最后一个框。在这种情况下，每个锚点切换第5个框，而不是自己的。

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)始终为{ {1}}在点击时附加的时间。一种更简单的方法是类，如下：

$("#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的自己的副本，而不是作为您{{{}的任何函数的共享变量。 1}}循环（这是当前正在发生的事情）。

动态jQuery选择器，变量问题

1 个答案: