单击另一个元素后，使用vanilla javascript向另一个元素添加/删除类

我已经浏览了许多类似的问题，但找不到一个具体的例子来回答vanilla JS中如何将类添加到与单击的元素不同的元素中。我知道这与建立循环和迭代元素有关，但我在确切的过程中迷失了方向

我有许多元素的类名为

faq container

，当我单击其中任何一个元素时，我希望将类

faq display

添加到body标记中。我知道我必须为（vari=0；I但我不确定要在代码中的什么位置编写它才能使其正常工作。我试过很多方法，但都失败了

我当前的脚本如下所示，其中我只针对数组中的第一个元素，但我希望能够单击任何

faq容器

元素，并将类名添加到第一个也是唯一的body标记中：

document.addEventListener（“DOMContentLoaded”，function（））{
document.GetElementsByCassName（'faq-container'）[0]。addEventListener（'click'，function（））{
var faqToggle=document.getElementsByTagName（'body'）[0]；
if（faqToggle.classList.contains（'faq-display'））{
faqToggle.classList.remove（'faq-display'）；
//警报（“删除常见问题解答显示！”）；
}否则{
faqToggle.classList.add（'faq-display'）；
//警报（“添加常见问题解答显示！”）；
}
});
});

您需要循环：

[...document.querySelectorAll('.faq-container')]
  .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.classList.contains("faq-container") || tgt.closest("div.faq-container")) { // is it the faq-container or one of the decendants
    document.querySelector('body').classList.toggle('faq-display')
  }
});


document.addEventListener（“DOMContentLoaded”，function（））{
var faqContainers=document.getElementsByClassName（'faq-container'）；
var faqToggle=document.getElementsByTagName（'body'）[0]；
对于（var i=0；i
请使用HTML更新您的代码片段，使其成为一个标记，因为标记是使用代码块的公司内容管理系统的一部分。但我会把它添加到我的示例中…请查看我的更新以获得更好的解决方案。除了我是第一个并使用更好的QuerySelector之外，这和我的有什么区别？
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!");
      }

    });
  }


});