forループ（イベント）のクロージャに関する問題

Question

以下は、異なる色の6つのボックスを作成するループです。ボックスをクリックすると、変数 "color"がボックスの色に変わります。このコードでは明らかな問題があり、クローズです（すべてのボックスが配列の最後のクラスを取得し、boxColors [i]はイベント内で使用できません）。エレガントな方法？事前に感謝します。

var boxColors = ['red', 'green', 'blue', 'yellow', 'white', 'black']; 

for (var i = 0; i < boxColors.length; i++){ 
    $('<div/>', { 
     'class': boxColors[i] 
    }).appendTo(toolboxSection1).click(function(){ 
     color = boxColors[i]; 
    });  
} 

Answer 1

この問題の例と一般的な場合の解決方法は、JavaScript closure inside loops – simple practical exampleに記載されています。

しかし、jQueryのはこの問題を解決するための別の方法である、（documentationを参照）を使用すると、イベントハンドラに追加のデータを渡すことができます：

for (var i = 0; i < boxColors.length; i++){ 
    $('<div/>', { 
     'class': boxColors[i] 
    }) 
    .appendTo(toolboxSection1) 
    .click({color: boxColors[i]}, function(event){ 
     // event.data.color 
    });  
} 

Answer 2

は問題があなたのforループではなく、それらのboxColors.length数の単一の変数iをキャプチャされている。この問題を解決する最も簡単な方法は、インデックスを取る新しい関数を作成することですパラメータとして使用し、すべての繰り返しに対して新しいiを作成します。

var action = function(i) { 
    $('<div/>', { 
     'class': boxColors[i] 
    }).appendTo(toolboxSection1).click(function(){ 
     color = boxColors[i]; 
    }); 
}; 

for (var index = 0; index < boxColors.length; index++) { 
    action(index); 
}