使用 class 更改 div 颜色的 eventListener 函数

Question

我正在尝试更改鼠标光标悬停在 div 上时的颜色。目前我陷入了寻找这样做的功能的阶段。 class 元素让我陷入困境您对函数的外观有什么建议吗？或者其他方法？我的 JS 代码附在下面，在评论中我已经描述了我想要实现的目标。

const container = document.getElementById('container');

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement('div');
    cell.innerText = (c + 1);
    container.appendChild(cell).className = 'grid-item';
  }
}

makeRows(16, 16);

let gridItem = document.querySelectorAll('grid-item');

function changeColor() {
  gridItem.style.color = "blue";
}

let pointerIn = document.getElementsByClassName('grid-item');

let i = pointerIn.length;
while (i--)
  pointerIn[i].addEventListener('mouseover', function() {
    changeColor();
  });

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

Answer 1

为了简化，您可以只为容器设置一个事件侦听器，然后测试是否单击了“网格项目”。

const container = document.getElementById('container');

container.addEventListener('click', e => {
  if (e.target.classList.contains('grid-item')) {
    e.target.classList.toggle('selected');
  }
});

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);

  let numbers = Array.from(Array(rows * cols).keys());
  numbers.forEach(num => {
    let cell = document.createElement('div');
    cell.innerText = (num + 1);
    cell.className = 'grid-item';
    container.appendChild(cell);
  });
}

makeRows(16, 16);

.selected {
  color: blue;
  background-color: lightBlue;
}

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

使用 class 更改 div 颜色的 eventListener 函数

eventListener function to change the color of a div with class

javascript

getelementsbyclassname