閉環問題（事件）

下面是一個循環，它創建了六個不同顏色的框。當點擊一個框時，變量「color」變成框的顏色。代碼存在一個明顯的問題，那就是關閉（所有的框都獲得數組中的最後一個類，boxColors [i]不可能在事件內部使用（undefined）。閉環問題（事件）

如何解決這個問題一個優雅的方式？在此先感謝。

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

來源

2012-01-09 holyredbeard

*」 ......所有的箱子得到的最後一堂課在陣列中......「*你確定嗎？每個元素都應該從數組中獲得唯一的類，所以唯一的問題應該是事件處理程序（可以輕鬆訪問元素的'className'屬性）。 – 2012-01-10 00:08:27

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

來源

2012-01-09 22:57:51

的問題是你的for循環捕捉他們的boxColors.length計數單變量i來代替。解決這個問題的最簡單的方法是創建一個新的函數，該函數索引作爲參數並因此爲每次迭代創建新的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); 
}

來源

2012-01-09 22:52:06 JaredPar

閉環問題（事件）

回答

相關問題