循环(事件）中的闭包问题

Issues with closure in for-loop (event)

本文关键字：闭包 问题 事件 循环      更新时间：2023-09-26

下面是一个循环，它创建了六个不同颜色的框。单击框时，变量"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];
    });     
}

这个问题的一个例子以及如何在一般情况下解决它，在循环内的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
    });     
}

问题是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);
}
相关文章：