forループでクリックハンドラを割り当てる

質問

私は、いくつかの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' . 私は何を間違えているのでしょうか？

どのように解決するのですか？

よくある間違いで クロージャをループの中で を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を書くのであれば、ES6用の let というキーワードを使うことで i 変数がグローバルではなく、ループのローカルになります。

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

短くてわかりやすい。