javascript - javascriptのカウンター変数の奇妙な値

Question

重複の可能性：
Javascriptの悪名高いループの問題？

何らかの理由で、すべてのdiv要素の関数内に「6」が表示されます。

for(var i = 1; i <= 5; i++){
  $('<div class="e-' + i + '"></div>').appendTo(something).click(function(){
    alert(i);  // <-- it's 6. wtf??
  });
}

1、2、3などの代わりに。

一方、クラスは正しく設定されているようです。

私は何が間違っているのですか？

Answer 1

ページの読み込みfor時にループが実行されています。アラートは、for ループが終了した後にクリック イベントが発生した場合にのみ発生します。したがって、 の値iは 6 になりました。

1）ページが読み込まれ、forループが機能します...

2) しばらくして、クリック イベントが発生します。ループがすでに完了しているiため、この時点での値は 6 です。for

Answer 2

問題は、クリック関数をバインドするときにの値をキャプチャするためにクロージャを作成する必要があることです。i

これを試して：

for(var i = 1; i <= 5; i++)
{
  $('<div class="e-' + i + '"></div>')
    .appendTo(something)
    .click(function(value)
    { 
      return function() { alert(value) };
    }(i));
}