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

【问题标题】：Issues with closure in for-loop (event)for循环（事件）中的闭包问题
【发布时间】：2012-01-09 22:49:18
【问题描述】：

下面是一个循环，它创建了六个不同颜色的框。单击框时，变量“颜色”会更改为框的颜色。代码有一个明显的问题，那就是闭包（所有框都获取数组中的最后一个类，并且 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];
    });     
}

【问题讨论】：

"...所有框都获取数组中的最后一个类..." 你确定吗？每个元素都应该从 Array 中获得一个唯一的类，因此唯一的问题应该是事件处理程序（它可以轻松访问元素的 className 属性）。

标签： javascript jquery closures

【解决方案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
    });     
}

【讨论】：

【解决方案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);
}

【讨论】：