我已经查看了许多类似的问题,但找不到一个在vanilla JS中回答的具体示例如何将类添加到一个不同的元素中并从中删除.我知道它与设置循环和迭代元素有关,但我在确切的过程中迷路了.

我有一些类名为faq-container的元素,当我点击其中任何一个时,我希望将类faq-display添加到body标签中.我知道我必须设置一个类似for(var i = 0; i< elements.length; i){elements [i] .classList.remove('hover');
但我不确定在代码中写到它的确切位置,以使其工作.我尝试了很多方法,但都失败了.

我当前的脚本如下所示,我只是定位数组中的第一个元素,但我希望能够点击任何faq-container元素并将类名添加到第一个也是唯一的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>

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!");
      }

    });
  }


});