javascript - 使用 javascript 在 css 网格布局中突出显示元素

Question

我得到了一个包含 25 个 div 元素的 css 网格。单击时，每个元素都应在突出显示和正常显示之间切换。

由于每个元素都可以单独打开和关闭，我为每个元素制作了一个box_state变量并将其设置为false作为初始值，这样它就可以设置为true 一旦打开。

为了突出显示每个元素，我得到了这段代码:

    document.querySelector("#n_1").onclick = function() {
    if (box_1_state === false) {
        document.querySelector("#n_1").style.filter = "brightness(150%)";
        box_1_state = true;
    } else {
        document.querySelector("#n_1").style.filter = "brightness(100%)";
        box_1_state = false;
    }

} 

n_1是html文件中div的名称，box_1_state是上面提到的变量。

因此，为了完成这项工作，我必须使代码块超过 25 次，这似乎可以更容易地完成。有什么建议吗？

Answer 1

• 您只需要 Element.classList.toggle()和一个特定的 CSS 类，即:"is-active"
• PS:过滤器亮度期望最大值为 100%

const ELS_box = document.querySelectorAll(".box");
ELS_box.forEach(EL => EL.addEventListener("click", function() {
  this.classList.toggle("is-active");
}))

.boxes {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  grid-template-rows: repeat(5, 30px);
  grid-auto-flow: column;
}

.box {
  margin: 5px;
  background: red;
}

.box.is-active {
  filter: brightness(50%);
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>