javascript - jQuery 启动许多按钮

Question

我一直在努力解决这个可能非常简单的问题。

我有动态生成的链接，例如 #l1、#l2.. 并且对于每个链接，我都有一个包含图像 img 的链接。 div 具有与链接对应的 ID，例如 #li1，当单击时，应切换 ID 为 #di1 的 div，依此类推。

我编写了一个测试，在其中循环访问 ID 号并构建 jquery 按钮监听器。内容如下:

a = [1,2,3,4]; // those are link and div IDs
for (k=0;k<3;k++){
    $("#"+"li"+a[k]).click(function() {
        $("#"+"di"+a[k]).toggle();
    });
}

但这给我的是所有链接上的监听器，它只切换最后一个 div!

再说一次:我在标签中有链接，单击该链接时，应该会切换到具有相应 ID 的不同 div。

我在这里做错了什么？

谢谢..

Answer 1

到时候 click被调用，值为 k是3 (因为 k++ )，只需使用 this上下文。

确保for-loop应该有 k < 4迭代条件 4(0, 1, 2, 3)元素。

var a = [1, 2, 3, 4];
for (k = 0; k < 4; k++) {
  $("#li" + a[k]).click(function() {
    $(this).toggle();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="li1">li1</div>
<div id="li2">li2</div>
<div id="li3">li3</div>
<div id="li4">li4</div>

采用您的方法:

Use closure, inner function remembers the environment in which it is created!

var a = [1, 2, 3, 4];
for (k = 0; k < 4; k++) {
  $("#di" + a[k]).click((function(k) {
    return function() {
      $("#li" + a[k]).toggle();
    }
  })(k));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="di1">Div 1</div>
<div id="di2">Div 2</div>
<div id="di3">Div 3</div>
<div id="di4">Div 4</div>
<hr>
<hr>

<div id="li1">Links 1</div>
<div id="li2">Links 2</div>
<div id="li3">Links 3</div>
<div id="li4">Links 4</div>