单击另一个元素后，使用 vanilla javascript 添加/删除 class 到不同的元素

Question

我查看了许多类似的问题，但找不到一个具体的例子来说明如何在 vanilla JS 中回答如何添加和删除 class 到与单击的元素不同的元素。我知道它与设置循环和遍历元素有关，但我在确切的过程中迷路了。

我有一些 class 名称为 faq-container 的元素，当我点击其中任何一个时，我想将 class faq-display 添加到body 标签。我知道我必须设置一个像 for (var i = 0; i < elements.length; i++) { elements[i].classList.remove('hover'); } 这样的循环，但我不确定在代码中将它写在哪里才能使它工作。我尝试了多种方法，但都失败了。

我当前的脚本如下，我只是将数组中的第一个元素作为目标，但我希望能够单击任何 faq-container 元素并添加 class 名称第一个也是唯一一个 body 标签：

document.addEventListener("DOMContentLoaded", function() {

  document.getElementsByClassName('faq-container')[0].addEventListener('click', function() {
    var faqToggle = document.getElementsByTagName('body')[0];
    if (faqToggle.classList.contains('faq-display')) {
      faqToggle.classList.remove('faq-display');
      // alert("remove faq display!");
    } else {
      faqToggle.classList.add('faq-display');
      // alert("add faq display!");
    }
  });


});

<div class="faq-container cf" id="faq-container">
  <h3 <?=ifxless::element( 'name')?>><?=ifxless::fill($this,'name');?> </h3>

  <div class="faq-content">
    <div class="h_line">&nbsp;</div>

    <div class="faq-bullets" <?=ifxless::element( 'content')?>>
      <?=ifxless::fill($this, 'content');?>
    </div>

  </div>

</div>

Answer 1

你需要循环：

[...document.querySelectorAll('.faq-container')] // spread is compatible with older EDGE
  .forEach(faq => faq.addEventListener('click', () => 
  document.querySelector('body').classList.toggle('faq-display')))

注意：如果你有很多这样的 div，你最好为父级设置一个事件处理程序并测试点击了什么。

document.getElementById('faqContainerParent')
  .addEventListener('click', e => {
  const tgt = e.target;
  if (tgt.matches(".faq-container") || tgt.closest("div.faq-container")) { // is it the faq-container or one of the descendants
    document.querySelector('body').classList.toggle('faq-display')
  }
});

Answer 2

document.addEventListener("DOMContentLoaded", function() {
  var faqContainers = document.getElementsByClassName('faq-container');
  var faqToggle = document.getElementsByTagName('body')[0];
  for (var i = 0; i < faqContainers.length; i++) {

    faqContainers[i].addEventListener('click', function() {

      if (faqToggle.classList.contains('faq-display')) {
        faqToggle.classList.remove('faq-display');
        // alert("remove faq display!");
      } else {
        faqToggle.classList.add('faq-display');
        // alert("add faq display!");
      }

    });
  }


});

单击另一个元素后，使用 vanilla javascript 添加/删除 class 到不同的元素

Use vanilla javascript to add / remove class to a different element after clicking on another one

javascript

class

getelementsbytagname

getelementsbyclassname