は期待のように、次のコードが動作する

Question

をループします。それは#yyボタンを押すとき.heads divの幅を増加し、#zzを押したときにそれを減少させる：

var q = ["#zz", "#yy"]; 
var c; 
$.each(q, function(key, value) 
{ 
    $(document).on('click', value, function() 
    { 
     c = (key == 0 ? -20 : 20); 
     $('.heads').css("width", $('.heads').width()+c); 
    }); 
}); 

私は以下のいずれかにコードを変更する場合しかし、それは両方のケースでの幅を増加します。ヘッド部門：

var q = ["#zz", "#yy"]; 
var c; 
$.each(q, function(key, value) 
{ 
    c = (key == 0 ? -20 : 20); 
    $(document).on('click', value, function() 
    { 
     $('.heads').css("width", $('.heads').width()+c); 
    }); 
}); 

質問：なぜですか？ $ .eachループは両方のケースで2回実行され、cは最初の反復では-20、2番目の反復では+20です。しかし、私はそれが最後のコードブロックと最初のコードブロック内（期待通りに-20または20のいずれかで、両方のケースでは20だように見えます.on機能（c）にはconsole.log場合。

Answer 1

機能をonclickイベントに割り当てられたクロージャである。このような関数をループ内で作成されている場合、彼らはまだ同じ環境を共有しています。あなたのc変数は$.each()ループの外で宣言され、あなたの第二の例では、その値が常に同じである理由です。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake