奇怪的JavaScript問題

我動態地插入一些HTML到文檔中（通過使用obj.innerHTML + ='一些HTML'）。在那個html中，有一些圖像帶有'imageId_X'ids（即imageId_1，imageId_2 ...）。這工作得很好，但有什麼毛病下面的代碼：奇怪的JavaScript問題

for (var n = 0; n < pConfig.images.length; n++) 
    { 
     document.getElementById('imageId_' + n).onclick = function() 
     { 
      alert(n); 
     } 
    }

有4種元素在pConfig.images和警報（N）總是提醒4.爲什麼會出現這種情況，我在做什麼錯？

來源

2010-08-19 Marius S.

除了閉包循環問題：**不要**使用'innerHTML + ='。這包括將元素的現有DOM內容串行化爲HTML字符串，添加到字符串中，然後將所有內容解析爲新的DOM對象。這很慢，會丟失流程中的任何不可序列化的信息，包括任何表單字段值，JavaScript引用或事件處理程序。 – bobince 2010-08-19 08:18:14

問題是你創建的每個函數都有一個對同一個n變量的引用 - 增加了一個。在循環結束時，它在4處 - 並且您所做的所有功能都使用該值引用該變量。

你可以解決它具有關閉，例如：

function closure(n) { 
    return function() {alert(n);} 
} 

for (var n = 0; n < pConfig.images.length; n++) 
{ 
    document.getElementById('imageId_' + n).onclick = closure(n); 
}

來源

2010-08-19 07:54:56 sje397

謝謝，這個作品 – 2010-08-19 08:00:55

問題的原因是在代碼中的lamba表達式。當你將你的匿名函數定義爲onclick處理函數時，你將它綁定到外部變量n，在循環結束時它總是4，所以你總是得到它4. 要做到這一點，要做到以下幾點：

for (var n = 0; n < pConfig.images.length; n++) 
{ 
    function(n) { 
     document.getElementById('imageId_' + n).onclick = function() 
     { 
     alert(n); 
     } 
    }(n); 
}

因此，您可以爲變量定義單獨的作用域。

來源

2010-08-19 07:54:43

謝謝你的幫助 – 2010-08-19 08:02:13

看起來你需要關閉。請參閱How do JavaScript closures work?

來源

2010-08-19 07:55:42

奇怪的JavaScript問題

回答

相關問題