Question

我正在动态地将一些html插入到文档中（通过使用obj.innerHTML + ='some html'）。在该html中，存在具有'imageId_X'id的图像（即，imageId_1，imageId_2 ......）。这工作正常，但以下代码有问题：

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

pConfig.images中有4个元素，alert（n）总是提醒4.为什么会发生这种情况，我做错了什么？

Answer 1

问题的原因是代码中的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);
}

因此，您为变量定义了单独的范围。

Answer 2

问题是你创建的每个函数都引用了同一个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);
}

Answer 3

看起来你需要一个闭包。见How do JavaScript closures work?

奇怪的JavaScript问题

3 个答案: