奇怪的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问题

回答

相关问题