javascript - 向子 div 添加悬停效果不起作用

Question

我想为我的 parentDiv 中的所有子元素添加鼠标悬停效果。但是现在，如果我将鼠标悬停在其中一个方 block 上，我的 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 在每次迭代时“单独”创建(它在 for 循环外不可见)并传递给箭头函数)。