Question

我有一个父div，我在其中添加了子div。我为每个孩子尝试添加一个onclick事件-这样，子div在单击时会更改其颜色：

    var div;
    for (var i=1; i<=size*size; i++)  {
        div = document.createElement("div");
        div.id = i;
        div.style.width = 480/size + "px";
        div.style.height = 480/size + "px";

        div.onclick= function()  {
            div.style.backgroundColor="orange";
        }
        resultNode.appendChild(div);
    }

但是，无论单击哪个子项，只有最后一个div都会更改其颜色。我怀疑是因为var div的最后一个值是最后一个孩子，但是一旦将它们添加到onclick内，添加到其先前对象中的resultNode是否不应该与这些对象一起保留？

我也尝试添加此循环：

    var children=resultNode.children;
    for (var i=0; i<children.length; i++)  {
        children.item(i).onclick = function()  {
            children.item(i).style.backgroundColor="blue";
            alert(i);
        }
    }

但是，它仅适用于索引不同的单个孩子，具体取决于孩子的数量。如果只有25（代码中值为size*size的子级），则索引为6的子级将被着色。如果有100个孩子，则第11个孩子将被着色；如果有400个孩子，则第21个孩子将被着色。始终是第二行的第二个div（存在size*size个div，它们与size行和size列组成一个正方形，这意味着着色的div位于{{1 }} + 1位）：

我不了解这种行为。为什么会发生这种情况？我应该如何编辑代码才能达到预期的效果（单击任何子div都会更改其颜色）？

Answer 1

div未引用click处理程序中的期望值，请参见JavaScript closure inside loops – simple practical example。您可以使用event.target来引用事件分配的元素

for (let i = 1; i <= 5; i++) {
  let div = document.createElement("div");
  div.id = i;
  div.textContent = i;
  div.onclick = e => e.target.style.backgroundColor = "orange";
  resultNode.appendChild(div);
}

<div id="resultNode"></div>

或者

for (let i = 1; i <= 5; i++) {
  let div = document.createElement("div");
  ((div) => {
    div.id = i;
    div.textContent = i;
    div.onclick = e => div.style.backgroundColor = "orange";
    resultNode.appendChild(div);
  })(div)
}

<div id="resultNode"></div>

Answer 2

如果您按如下所示进行调整，您的代码也将起作用：

var div;
    for (var i=1; i<=size*size; i++)  {
        div = document.createElement("div");
        div.id = i;
        div.style.width = 480/size + "px";
        div.style.height = 480/size + "px";

        div.onclick= function()  {
            this.style.backgroundColor="orange";
        }
        resultNode.appendChild(div);
    }

内部onclick函数只需将其更改为this.style.background = 'orange'对象而不是div.style.background = 'orange'对象。您的代码无法正常工作，因为div对象指向您的最后一个div。

子div的onclick事件：动态添加的子div的onclick不能按预期运行

2 个答案: