如何在 JavaScript 中向网格中的方块添加功能？

Question

我使用 HTML、CSS 和 JavaScript 制作了一个网格，主要基于 Stack Overflow 上这个问题的答案中的代码使用 JavaScript 创建 16x16 网格。我的问题是，我想为每个人开设课程，但我不确定我是否做得对。例如，我希望能够单击一个单独的方块，然后控制台。记录它是什么方块。

我尝试将下面的代码添加到 JavaScript，但我不确定它是否有效。

    cell.classList.add('cell');
    cell.id = 'cell-${c}'

代码片段 （归属：Nidhin Joseph）

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);

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  grid-gap: 1em;
  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>

Answer 1

这很容易。这里唯一先进的事情是通过监听父方来为所有方格使用一个事件处理程序。我还为

.grid-item:hover

添加了 CSS 规则。您始终可以将值存储为元素的

data-something

属性。

container.addEventListener("click", function(ev) {
  var div = ev.target
  alert(div.innerText)
})

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);
    cell.setAttribute("data-something", "my c is " + c);
    container.appendChild(cell).className = "grid-item";
  };
};

makeRows(16, 16);

container.addEventListener("click", function(ev) {
  var div = ev.target
  alert(div.getAttribute("data-something"))
})

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  grid-gap: 1em;
  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;
}

.grid-item:hover {
  background: gray;
  cursor: pointer;
}

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