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

Question

我有几个div的#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 createCallback( i ){
  return function(){
    alert('you clicked' + i);
  }
}

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

由于这个问题仍然受到关注，并且ES6也越来越受欢迎，因此我建议使用一种现代的解决方案。如果您编写ES6，则可以使用let关键字，它使i变量在循环本地而不是全局：

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

它更短，更容易理解。