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

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

for循环（事件）中的闭包问题

2 个答案: