javascript - 如何设置 div onclick 的背景？

Question

我试图在单击 div 时设置它的背景，然后当再次单击它时它会反转回无颜色。这是我的代码：

<div class="wrapper">
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: repeat(107, 1fr);
    grid-template-rows: repeat(59, 1fr);
    grid-gap: 0px;

}

.wrapper div {
    padding: 5px;
    background-color: none;
    text-align: center;
    border: 0.001px solid black;
    font-size: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper div:hover {
    background: white;
}

function set() {

    var squares = document.getElementById('square');
    for (var i = 0; i < squares.length; i++) {
        squares[i].style.backgroundColor = "none";
    }

    if (squares[i].style.backgroundColor === "none") {
        squares[i].style.backgroundColor = "white";
    } else {
        squares[i].style.backgroundColor = "none";
    }
}

当我单击 div 时，它什么也不做。我的javascript代码不起作用，我应该如何更改它，以便在单击时使div背景变为白色，然后在再次单击时变为无。

标签： javascripthtmlcss

Answer 1

您可以在侦听单击事件的父元素上放置一个事件侦听器。当它收到点击事件时，如果它来自其中一个方块，则切换一个类以保持背景颜色。如果它已经有那个类，它将被删除。

document.querySelector('.squares').addEventListener('click', e => {
  if (e.target.classList.contains('square')) {
    e.target.classList.toggle('selected');
  }
});

.wrapper {
  display: grid;
  grid-template-columns: repeat(107, 1fr);
  grid-template-rows: repeat(59, 1fr);
  grid-gap: 0px;
}

.wrapper div {
  padding: 5px;
  background-color: none;
  text-align: center;
  border: 0.001px solid black;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .square:hover, .square.selected {
  background: white;
}

body { background-color: #888; }

<div class="wrapper squares">
  <div class="square">A</div>
  <div class="square">B</div>
  <div class="square">C</div>
  <div class="square">D</div>
  <div class="square">E</div>
  <div class="square">F</div>
  <div class="square">G</div>
</div>