在for循环中分配单击处理程序

Question

在for循环中分配单击处理程序

我有几个div‘s#mydiv1, #mydiv2, #mydiv3.。并希望将单击处理程序分配给它们：

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

但是没有表现出来'you clicked 3'当点击#mydiv3(至于每一次点击)我得到'you clicked 20'..我做错什么了？

Answer 1

这是一个常见的错误循环闭包在Javascript里。您需要像这样的回调函数：function&nbsp;createCallback(&nbsp;i&nbsp;){ &nbsp;&nbsp;return&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;alert('you&nbsp;clicked'&nbsp;+&nbsp;i); &nbsp;&nbsp;}}$(document).ready(function(){ &nbsp;&nbsp;for(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;20;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('#question'&nbsp;+&nbsp;i).click(&nbsp;createCallback(&nbsp;i&nbsp;)&nbsp;); &nbsp;&nbsp;}});2016年6月3日：由于这个问题仍然有一些牵引力和ES6也是流行的，我建议一个现代的解决方案。如果编写ES6，则可以使用let关键字，这使得i变量是循环的局部变量，而不是全局变量：for(let&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;20;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;$('#question'&nbsp;+&nbsp;i).click(&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;alert('you&nbsp;clicked&nbsp;'&nbsp;+&nbsp;i); &nbsp;&nbsp;});}它更短更容易理解。

Answer 2

为了澄清，我等于20，因为单击事件在循环完成后才会触发。