8x8 div 矩阵 onclick 有效化

Question

我想要一个 8x8 矩阵，我可以在其中单击每个方块，颜色会发生变化，以便在项目中使用。

我已经制作了一个二维数组和整个 8x8“板”，但现在我想在点击时更改颜色，尽管我能想到的唯一方法是通过繁重的代码，例如编写 div[row][column] 64次...

var div = new Array(8);
for(var i = 0; i<8; i++){
div[i] = new Array(8)
}


for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
    div[i][j] = document.createElement("div");
    div[i][j].style.width = "50px";
    div[i][j].style.height = "50px";
    div[i][j].style.backgroundColor = "white";
    document.getElementById("container").appendChild(div[i][j]);
}
var jump = document.createElement("br");
document.getElementById("container").appendChild(jump);
}

div[0][0].onclick = function(){
if(div[0][0].style.backgroundColor == "white"){
    div[0][0].style.backgroundColor = "red"
    d00 = 1
}
else{div[0][0].style.backgroundColor = "white"
d00 = 0
}
}

以上64次我不想写，肯定有更好的办法。

#container {
margin: auto;
width:400px;
height:400px;
}
#container div {
display:inline-block;
vertical-align:top;
outline: 1px solid black
}

Answer 1

您可以将onclick事件附加到父容器并使用event.target获取触发事件的div：

document.getElementById("container").onclick = function(event){
  if(event.target.style.backgroundColor == "white"){
    event.target.style.backgroundColor = "red";
  }
  else{
    event.target.style.backgroundColor = "white";
  }
}

Answer 2

确实，有更好的方法。 在 for 循环中，您已经在设置 ​​DIV 的重要属性。这是附加 click 事件侦听器的理想场所，该事件侦听器的回调函数将处理颜色切换。

像这样修改for循环：

var divElement;
for (var i = 0; i < 8; i++) {
  for (var j = 0; j < 8; j++) {
    divElement = document.createElement("div");
    divElement.style.width = "50px";
    divElement.style.height = "50px";
    divElement.style.backgroundColor = "white";
    divElement.addEventListener("click", changeColor);
    document.getElementById("container").appendChild(divElement);
  }

并使用这个函数来实际改变颜色：

function changeColor(e) {
  if (e.target.style.backgroundColor == "white") {
    e.target.style.backgroundColor = "red"
    d00 = 1
  } else {
    e.target.style.backgroundColor = "white"
    d00 = 0
  }
}

e.target 指的是触发事件的对象。 原谅我，我不知道d00的目的。