单击以使用JS将同一个类添加到其他元素后删除一个类

Question

我在英雄容器的底部有一个导航栏。当我单击一个项目时，我希望它具有一个活动的类。当我单击另一个项目时，我希望上一个项目删除活动类并将活动类应用于新元素。

到目前为止，我可以单击以将活动类添加到每个元素，但无法弄清楚如何从先前单击的元素中将其删除。 任何帮助将不胜感激。

我提供了一些示例代码。

let items = document.querySelectorAll('.item');

for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    if (items[i].classList.contains('active') === false) {
      this.classList.toggle('active');
    } else {
      this.classList.remove('active');
    }
  })
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  border: 2px solid orange;
  padding: 40px;
}

.active {
  background: orange;
  color: white;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Answer 1

从事件处理程序函数内的元素（如果有）中删除类。您可以使用forEach()来实现。

let items = document.querySelectorAll('.item');

for (let i = 0; i < items.length; i++) {
   items[i].addEventListener('click', function() {
      items.forEach(el =>  el.classList.remove('active'));
      if(items[i].classList.contains('active') === false) {
         this.classList.toggle('active');
      } else {
         this.classList.remove('active');
      }
   })
}

.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

.item {
   border: 2px solid orange;
   padding: 40px;
}

.active {
   background: orange;
   color: white;
}

<div class="container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
</div>

OR：：您只能以该类（active）为目标，如果存在，则从该元素中删除该类。

let items = document.querySelectorAll('.item');

for (let i = 0; i < items.length; i++) {
   items[i].addEventListener('click', function() {
      var active = document.querySelector('.active');
      if(active)
        active.classList.remove('active');
      if(items[i].classList.contains('active') === false) {
         this.classList.toggle('active');
      } else {
         this.classList.remove('active');
      }
   })
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  border: 2px solid orange;
  padding: 40px;
}

.active {
  background: orange;
  color: white;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Answer 2

这是一个解决方案，您可以在代码中添加以下行：

document.querySelectorAll('.item').forEach(e => e.classList.remove('active')); 

这将删除每次单击该项目的所有活动类。要查看实际效果：

let items = document.querySelectorAll('.item');

for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
  
    document.querySelectorAll('.item').forEach(e => e.classList.remove('active')); // add this
    
    if (items[i].classList.contains('active') === false) {
      this.classList.toggle('active');
    } else {
      this.classList.remove('active');
    }
  })
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  border: 2px solid orange;
  padding: 40px;
}

.active {
  background: orange;
  color: white;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Answer 3

实现此目标的一种可能方法。 点击后，请执行；

1. 从全部 item中删除active类。
2. 仅将items类添加到单击的active中。

例如

item