单击 div 中的第二个框，第一个框应恢复其样式，依此类推。我怎么能用纯 JavaScript 做到这一点答案

【问题标题】：Click on second box within div the first box should regain its style and so...on. How could I do it with pure JavaScript单击 div 中的第二个框，第一个框应恢复其样式，依此类推。我怎么能用纯 JavaScript 做到这一点
【发布时间】：2022-09-27 22:35:18
【问题描述】：

容器内的 3 个 div 每个 div 包含 3 个盒子，总共 9 个盒子。我使用事件委托并在每个父框上应用带有 forEach 循环的 addeventlistener，这会改变框的颜色和背景颜色。但我想单击其他框，即第一个每次都恢复其原始样式意味着只有框可以借用更改后的样式一次。

const box = document.querySelectorAll(\'.box\');
box.forEach((boxes)=>{
  boxes.addEventListener(\"click\",(e)=>{
    e.target.style.background=\"green\";
    e.target.style.color=\"white\";
  })
})

<div class=\"container\">
  <div class=\"box\">
    <div class=\"box1 boxes1\">1</div>
    <div class=\"box1 boxes4\">4</div>
    <div class=\"box1 boxes7\">7</div>
  </div>
  <div class=\"box\">
    <div class=\"box1 boxes2\">2</div>
    <div class=\"box1 boxes5\">5</div>
    <div class=\"box1 boxes8\">8</div>
  </div>
  <div class=\"box\"> 
    <div class=\"box1 boxes3\">3</div>
    <div class=\"box1 boxes6\">6</div>
    <div class=\"box1 boxes9\">9</div>
  </div>
</div>

你能清楚你要做什么吗？这是什么意思-但我想点击其他框，即第一个每次都恢复其原始样式意味着只有该框可以借用更改后的样式一次。

标签： javascript html css

【解决方案1】：

任何时候单击某物时，只需将所有值重置为第一个操作。例如：

const box = document.querySelectorAll('.box');
box.forEach((boxes)=>{
  boxes.addEventListener("click",(e)=>{
    // reset all styles
    document.querySelectorAll('.box1').forEach(b => {
      b.style.background="unset";
      b.style.color="unset";
    });

    // set new style
    e.target.style.background="green";
    e.target.style.color="white";
  })
})

<div class="container">
  <div class="box">
    <div class="box1 boxes1">1</div>
    <div class="box1 boxes4">4</div>
    <div class="box1 boxes7">7</div>
  </div>
  <div class="box">
    <div class="box1 boxes2">2</div>
    <div class="box1 boxes5">5</div>
    <div class="box1 boxes8">8</div>
  </div>
  <div class="box"> 
    <div class="box1 boxes3">3</div>
    <div class="box1 boxes6">6</div>
    <div class="box1 boxes9">9</div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用一个类，然后测试该类以在应用新样式之前将其删除，如下所示。

const boxes = document.querySelectorAll('.box');
boxes.forEach((box) => {
  box.addEventListener("click", (e) => {
    const clickedElement = document.querySelector('.clicked');
    if(clickedElement) {
      clickedElement.classList.remove('clicked');
    }
    e.target.classList.add('clicked');
  })
})

.clicked {
  background-color: green;
  color: white;
}

<div class="container">
  <div class="box">
    <div class="box1 boxes1">1</div>
    <div class="box1 boxes4">4</div>
    <div class="box1 boxes7">7</div>
  </div>
  <div class="box">
    <div class="box1 boxes2">2</div>
    <div class="box1 boxes5">5</div>
    <div class="box1 boxes8">8</div>
  </div>
  <div class="box">
    <div class="box1 boxes3">3</div>
    <div class="box1 boxes6">6</div>
    <div class="box1 boxes9">9</div>
  </div>
</div>

【讨论】：