如何在点击事件触发器Javascript时删除forEach循环中的类

Question

我正在尝试从所有元素中删除一个active类。我已经创建了循环事件。在函数内部，单击事件发生在我想要从该循环的所有a中删除一个类的地方。但是，我似乎不能正确地编写这段代码：

const links = document.querySelectorAll('.link-block a');
links.forEach(el => { 
   el.addEventListener('click', e => { 
      el.classList.remove('active');
   })
})

完整代码：

const texts = document.querySelectorAll('.content p > span');
const links = document.querySelectorAll('.link-block a');
links.forEach(el => {
  el.addEventListener('click', e => {
    texts.forEach(text => text.classList.add('hidden'));
    const id = e.target.getAttribute('href');
    el.classList.remove('active');
    e.target.classList.add('active');
    document.querySelector(id).classList.remove('hidden');
  }); 
});

.hidden {
  display: none;
}

.active {
  color: #f0f;
}

<section>
  <section class="content">
    <p>
      <span id="content-1">Sample Text for Content 1.</span>
      <span id="content-2" class="hidden">Sample Text for Content 2.</span>
      <span id="content-3" class="hidden">Sample Text for Content 3.</span>
    </p>
  </section>
  <section class="link-block">
    <a href="#content-1" class="active">Content 1</a>
    <a href="#content-2">Content 2</a>
    <a href="#content-3">Content 3</a>
  </section>  
</section>

​

Answer 1

您需要另一个循环来从每个元素中删除一个类。

代码中的el.classList.remove('active');引用的是当前元素，而不是元素集合。

​

const texts = document.querySelectorAll('.content p > span');
const links = document.querySelectorAll('.link-block a');
links.forEach(el => {
  el.addEventListener('click', e => {
    texts.forEach(text => text.classList.add('hidden'));
    const id = e.target.getAttribute('href');
    links.forEach(el => {
      el.classList.remove('active');
    });
    e.target.classList.add('active');
    document.querySelector(id).classList.remove('hidden');
  });
});

.hidden {
  display: none;
}

.active {
  color: #f0f;
}

<section>
  <section class="content">
    <p>
      <span id="content-1">Sample Text for Content 1.</span>
      <span id="content-2" class="hidden">Sample Text for Content 2.</span>
      <span id="content-3" class="hidden">Sample Text for Content 3.</span>
    </p>
  </section>
  <section class="link-block">
    <a href="#content-1" class="active">Content 1</a>
    <a href="#content-2">Content 2</a>
    <a href="#content-3">Content 3</a>
  </section>
</section>

​

Answer 2

links.forEach(el => {
  el.addEventListener('click', e => {
    links.forEach(element => {
      element.classList.remove('active');
    });
    texts.forEach(text => text.classList.add('hidden'));
    const id = e.target.getAttribute('href');
    e.target.classList.add('active');
    document.querySelector(id).classList.remove('hidden');
  }); 
});