Question

我想为parentDiv中的所有子项添加MouseOver效果。但是现在，如果我将鼠标悬停在这些正方形之一上，则无论我将鼠标放在哪个孩子上，childDivs的最后一个实际上都会改变其背景。为什么会这样？

for (let i = 0; i < Number(height); i++)
    {
        for (let j = 0; j < Number(width); j++)
        {                               
            var childDiv = document.createElement("div");
            childDiv.className = "childDiv";
            childDiv.style.backgroundColor = "#e6e6e6";
            childDiv.id = `${i};${j}`
            childDiv.onclick = () => childDiv.style.backgroundColor = "black";
            childDiv.onmouseenter = () => childDiv.style.background = "#cccccc";                
            childDiv.onmouseleave = () => childDiv.style.background = "#e6e6e6";
            parentDiv.appendChild(childDiv); 
        }           
    }

Answer 1

将var更改为：

let childDiv = document.createElement("div");

工作示例here。这是有关var and let之间差异的更多信息（简而言之，var childDiv在第一次迭代时创建一次（并且在循环外部可见），并且在最后一次迭代时，其值设置为最后一项-每个箭头功能（）=> {}使用childDiv及其在循环执行后的最后一个值； let childDiv在每次迭代中“分别”创建（在循环外部不可见）并传递给箭头函数）。

将悬停效果添加到子div不起作用

1 个答案: