在for循环中分配点击处理程序 [英] Assign click handlers in for loop

问题描述

我有几个div ＃mydiv1 ，＃mydiv2 ，＃mydiv3 ，...并要为其分配点击处理程序：

  $（document）.ready function（）{
 for（var i = 0; i <20; i ++）{
 $（'＃question'+ i）.click（function（）{
 alert you clicked'+ i）; 
}）; 
} 
}）; 
  

但是不是显示'你点击了3'点击＃mydiv3 （与其他点击一样），我得到'你点击20'。

解决方案

创建 闭包中循环 。你需要有这样的回调函数：

  function createCallback（i）{
 return function {
 alert（'you clicked'+ i）; 
} 
} 
 
 $（document）.ready（function（）{
 for（var i = 0; i <20; i ++）{
 $（'＃question'+ i）.click（createCallback（i））; 
} 
}）; 
  
 
 
 
 
 
 
 更新2016年6月3日： / em>，因为这个问题仍然得到一些牵引，ES6也越来越受欢迎，我建议一个现代的解决方案。如果你编写ES6，你可以使用 let 关键字，这使得 i  ：
  for（let i = 0; i <20; i ++）{
 $（' + i）.click（function（）{
 alert（'you clicked'+ i）; 
}）; 
} 
  
它更短，更容易理解。
 
I'm having several div's #mydiv1, #mydiv2, #mydiv3, ... and want to assign click handlers to them:
$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( function(){
      alert('you clicked ' + i);
    });
  }
});
But instead of showing 'you clicked 3' when click on #mydiv3 (as for every other click) I get 'you clicked 20'. What am I doing wrong?
解决方案
It's a common mistake to create closures in loops in Javascript. You need to have some sort of callback function like this:
function createCallback( i ){
  return function(){
    alert('you clicked' + i);
  }
}

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( createCallback( i ) );
  }
});




Update June 3, 2016: since this question is still getting some traction and ES6 is getting popular as well, I would suggest a modern solution. If you write ES6, you can use the let keyword, which makes the i variable local to the loop instead of global:
for(let i = 0; i < 20; i++) {
  $('#question' + i).click( function(){
    alert('you clicked ' + i);
  });
}
It's shorter and easier to understand.

                        
这篇关于在for循环中分配点击处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！