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

但是当点击 #mydiv3 时，我没有显示 'you clicked 3'(对于其他所有点击)，我得到的是 'you clicked 20'。我做错了什么？

Answer 1

创建 closures in loops 是一个常见的错误在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 ) );
  }
});

---

2016 年 6 月 3 日更新:由于这个问题仍然受到一些关注并且 ES6 也越来越流行，我建议采用现代解决方案。如果你编写 ES6，你可以使用 let 关键字，这使得 i 变量在循环中是局部的，而不是全局的:

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

它更短且更容易理解。