javascript - 在循环中附加事件

Question

我正在做的是使用循环在类上附加事件，并且在事件处理程序代码中使用索引值。这是我的代码：

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
{
    classElements[i].onClick=function(){
       alert("Clicked button : "+i);
    }
}

每当我单击任何按钮时，它都会发出警报

Clicked Button : 4

可能是什么问题？

Answer 1

JavaScript 关闭对象并在稍后调用它时对其进行评估。在它被调用时，i是 4。

我想你想要这样的东西：

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
{
    classElements[i].onClick=function(j) { 
       return function(){
          alert("Clicked button : "+j);
       };
    }(i);
}

编辑：显示命名函数以使代码更清晰

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
{
    var makeFn = function(j) { 
       return function(){
          alert("Clicked button : "+j);
       };
    };
    classElements[i].onClick = makeFn(i);
}

Answer 2

您需要一个闭包来捕获i. 正如娄所说，这是由于事后评估。

var classElements=document.getElementsByClassName("a");
for(var i=0; i<4; i++)
    classElements[i].onclick = (function(i){
          return function(){ alert("Clicked button : " + i) }; 
       })(i);