javascript - 鼠标悬停时不调用和更改背景颜色的功能

Question

我已经用网格填充了一个容器，现在想添加一些功能，当您的鼠标经过单元格时，背景颜色会发生变化。

到目前为止我有:

let container = document.getElementById("container");

let createGrid = (row, col) => {
  for(let i = 0; i < (row * col); i++) {
    let cell = document.createElement("div");
    cell.className = ("cell");
    container.appendChild(cell);
  }
}
createGrid(100, 60);

let cells = document.querySelectorAll('container div');
let functionality = () => cells.addEventListener('mouseover', function() {
  cells.style.backgroundColor = "red";
}
);
functionality();

Answer 1

您没有正确定位 <div> querySelectorAll 中的元素.另外，querySelectorAll返回 NodeList由您查询的所有 div 元素组成的对象，因此您必须使用类似 forEach() 的方法遍历 NodeList 中的每个元素然后将样式应用于每个元素。

---

检查并运行以下代码片段以获取上述方法的实际示例:

let container = document.getElementById("container");

let createGrid = (row, col) => {
  for(let i = 0; i < (row * col); i++) {
    let cell = document.createElement("div");
    cell.className = ("cell");
    container.appendChild(cell);
  }
}
createGrid(100, 60);

let cells = document.querySelectorAll('#container div');
let functionality = () => cells.forEach(e => e.addEventListener('mouseover', (e) => {
  e.target.style.backgroundColor = "red";
}
));
functionality();

.cell {padding: 5px;}

<div id="container"></div>

---

注意 而不是针对所有 <div>里面的元素#container ，您可以将所有具有类名“cell”的 div 元素作为目标，因为您已将该类名添加到每个网格元素，这将防止对其他类型的 <div> 进行不必要的 css 更改。您可能添加到 #container 的元素从长远来看。