Question

可能重复：
adding ‘click’ event listeners in loop

我做了一个demo.So让我们先看看HTML。

<a href="#" id="testA">testA</a>
<a href="#" id="testB">testB</a>    

<div id="showA">showA</div>
<div id="showB">showB</div>

我希望将click个事件绑定到元素a。点击后，alert相关div。（点击id="testA"，提醒id="showA" ...）

我写了jQuery代码。

var arr = ["A","B"];    
  for(var i=0;i<arr.length;i++){
    $("#test"+arr[i]).click(function(){
      alert($("#show"+arr[i]).text())
    });
  }

但它不起作用。我调试此代码并找到此代码alert($("#show"+arr[i]).text())

仅在我单击a元素时运行。当我点击a时。变量i已经是3。

那我该怎么办？

Answer 1

问题是，一旦执行了事件处理程序，i将达到其最终值并停留在arr.length。您可以使用闭包在循环的每次迭代中捕获i的值：

var arr = ["A","B"];    
for(var i=0;i<arr.length;i++) {
    (function (i) {
        $("#test"+arr[i]).click(function(){
            alert($("#show"+arr[i]).text())
        });
    }(i));
}

这是working example。

Answer 2

最简单/最干净的解决方案是使用forEach循环。

arr.forEach(function(val) {
  $("#test"+ val).click(function() {
    alert($("#show"+ val).text())
  });
});

如果您想要支持旧浏览器，那么在线有很多填充物。

修改：由于您使用jQuery，您也可以使用$.each执行此操作：

$.each(arr, function(idx, val) { ... });

Javascript - 在循环中附加事件

2 个答案: