附加事件循环 [英] attaching event in loop

问题描述

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

  var classElements = document.getElementsByClassName（a）; 
 for（var i = 0; i< 4; i ++）
 {
 classElements [i] .onClick = function（）{
 alert（Clicked button：+ i ）; 
} 
} 
  

当我点击任何按钮，它提醒

 点击按钮：4 
  

可能是什么可能？

解决方案

JavaScript关闭对象，稍后评估调用。当它被调用时， i 是4。

我想你想要的东西：

  var classElements = document.getElementsByClassName（a）; 
 for（var i = 0; i< 4; i ++）
 {
 classElements [i] .onClick = function（j）{
 return function（）{
 alert（点击按钮：+ j）; 
}; 
}（i）; 
} 
  

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

  var classElements = document.getElementsByClassName（a）; 
 for（var i = 0; i< 4; i ++）
 {
 var makeFn = function（j）{
 return function（）{
 alert点击按钮：+ j）; 
}; 
}; 
 classElements [i] .onClick = makeFn（i）; 
} 
  

what am doing is attaching event on a class using a loop and index values are being used in the event handler code. here is my code:

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

when ever I click any of the buttons, it alerts

Clicked Button : 4

What could be the prob?

解决方案

JavaScript closes over the object and evaluates it later when it is called. At the time it is called, i is 4.

I think you want something like:

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

EDIT: shown with named functions to make the code more clear

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);
}

这篇关于附加事件循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！