我有一个父 div,我在循环中向其添加子 div。我尝试为每个 child 添加一个 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
的最后一个值是最后一个 child ,但不应该是 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);
}
}
但是,它仅适用于索引根据 child 数量而变化的单个 child 。如果只有 25
(它在代码中的值 size*size
)children,索引为 6
的 child 会变色。如果有100
children ,11
如果有400
, child 会变色 children ,21
第一个 child 会变色。这始终是第二行的第二个 div(有 size*size
div 与 size
行和 size
列形成正方形,这意味着着色的 div 位于 size
+1 位置):
我不明白这种行为。为什么会发生这种情况,我应该如何编辑代码以获得预期的结果(点击时任何子 div 都会改变其颜色)?
最佳答案
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>
关于javascript - 子 div onclick 事件 : onclick on dynamically added children divs doesn't work as intended,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54751889/