jquery - jqueryの単純な混乱

Question

 for(var m=1;m<=26;m++)
{

$("#letter"+m).click(function() {
    $("#letter1").attr('value', m); 
    j = 0;

    setValue(this.value, length);
    changeImage("#img");
})
}

上記のコードでは、すべてが期待どおりに機能しますが、唯一の問題は次のとおりです。

$("#letter1").attr('value', m);

しかし、どのボタンをクリックしても値が常に 27 になるのはなぜですか?

Answer 1

理由についてはIgorの正当な理由 (ハンドラーが実行されるまでにmは長い間27) でしたが、別の解決策をお勧めします。

ループで変化しない別の変数を使用すると、期待どおりの動作が得られます。JavaScript には関数スコープがあるため、これを行う最も簡単な方法は、関数を使用することです。

function attachHandler(m) {
    // Since it's an argument, the m in here will initially take the value of the
    // m outside, but it's not the same variable, so it won't change as the
    // outside m changes.
    $("#letter"+m).click(function() {
        $("#letter1").attr('value', m); 
        j = 0;
        setValue(this.value, length);
        changeImage("#img");
    });
}
for(var m=1;m<=26;m++) {
    attachHandler(m);
}

これの一般的なイディオムは、すぐに呼び出される関数式を使用することです。

for(var m = 1; m <= 26; m++) {
    (function(m) {
        $("#letter"+m).click(function() {
            $("#letter1").attr('value', m); 
            j = 0;
            setValue(this.value, length);
            changeImage("#img");
        });
    })(m);
}

Answer 2

clickハンドラーが実行されるまでに、ループはかなり前に終了し、ループが終了したm値 27 が割り当てられました。

for(var m=1;m<=26;m++)
{
  $("#letter"+m).attr("valueOfM", m);
  $("#letter"+m).click(function() {
    $("#letter1").attr('value', $(this).attr("valueOfM")); 
    j = 0;

    setValue(this.value, length);
    changeImage("#img");
  });
}

Answer 3

ループは毎回 m をインクリメントするたびに 26 回実行されるため、m は 27 になります。おそらく、別の var を 1 に設定してそれを使用することをお勧めします。