使用 for 循环创建 JavaScript 中的特定 div 后，如何定位它们？

Question

由于这是一个 Etch-a-Sketch 剽窃，我需要能够不按顺序对 div 进行着色，但是，我设置的 for 循环会遍历每个方块，并在仅接触其中一个方块后将它们全部着色。JavaScript：const container = document.getElementById("container");        function makeRows (rows, columns) {        container.style.setProperty('--grid-rows', rows);        container.style.setProperty('--grid-cols', columns);        for (c = 0; c < (rows * columns); c++) {            let cell = document.createElement("div");            //cell.innerText = (c + 1);            container.appendChild(cell).className = "grid-item";        }        }        //Draw Board    makeRows(16, 16);        //Paint on board    const paint = document.querySelector("div.grid-item");            paint.addEventListener('mouseover', function(){            let paintBrush = document.getElementsByClassName('grid-item');                        for (let i = 0; i < paintBrush.length; i++)            {                paintBrush[i].style.backgroundColor = "black";            }            console.log("AHH HELP AHH");                });CSS：:root {    --grid-cols: 0;    --grid-rows: 0;  }    #container {    display: grid;    padding: 10em;    height: 40vh;    width: 50vh;    margin-left: auto;    margin-right: auto;    grid-template-rows: repeat(var(--grid-rows), 1fr);    grid-template-columns: repeat(var(--grid-cols), 1fr);      }    .grid-item {    padding: 1em;    border: 1px solid #ddd;    text-align: center;  }

Answer 1

我认为您可以通过类名获取所有元素（然后循环遍历它们以单独添加侦听器。

请参阅下面的演示

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

function makeRows(rows, columns) {

  container.style.setProperty('--grid-rows', rows);

  container.style.setProperty('--grid-cols', columns);

  for (c = 0; c < (rows * columns); c++) {

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

    //cell.innerText = (c + 1);

    container.appendChild(cell).className = "grid-item";

  }

}

//Draw Board

makeRows(16, 16);

//Paint on board

const paint = document.getElementsByClassName("grid-item");

for (var idx = 0; idx < paint.length; idx++) {

  paint[idx].addEventListener('mouseover', function() {

    this.style.backgroundColor = "black";

  });

}

:root {

  --grid-cols: 0;

  --grid-rows: 0;

}

#container {

  display: grid;

  padding: 10em;

  height: 40vh;

  width: 50vh;

  margin-left: auto;

  margin-right: auto;

  grid-template-rows: repeat(var(--grid-rows), 1fr);

  grid-template-columns: repeat(var(--grid-cols), 1fr);

}

.grid-item {

  padding: 1em;

  border: 1px solid #ddd;

  text-align: center;

}

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