Проблемы с закрытием в цикле for (событие)

Question

Ниже находится цикл, который создает шесть коробок с разными цветами.При нажатии на поле переменная «цвет» меняется на цвет окна.Существует очевидная проблема с кодом, и он закрывается (все блоки получают последний класс в массиве, и 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 внутри циклов - простой практический пример .

Однако jQuery позволяет передавать дополнительные данные в обработчик событий (см. Документацию ), что является еще одним способом решения этой проблемы:

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 захватывает единственную переменную i вместо boxColors.length их числа. Самый простой способ исправить это - создать новую функцию, которая принимает индекс в качестве параметра и, следовательно, создает новый 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);
}