javascript - 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 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
    });     
}