Question

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

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

我当前的脚本如下所示，我只是定位数组中的第一个元素，但我希望能够点击任何faq-container元素并将类名添加到第一个且唯一的正文中标记：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

    });
  }


});

Answer 2

你需要循环：

var faqs = document.querySelectorAll('.faq-container');
for (var i=0;i<faqs.length;i++) {
  faq[i].addEventListener('click', toggleFaq);
  // or faq[i].onclick=toggleFaq;
}


function toggleFaq() {
  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，你最好为父母提供一个事件处理程序并测试点击的内容。我还给了你一个crossbrowser附加事件处理程序

function addEvent(element, myEvent, fnc) { return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false)); }

var topContainer = document.getElementById('faqContainerParent');

addEvent(topContainer,'click', function(e) {
  var tgt = e.target;
  if (tgt && tgt.nodeName === 'DIV') {
    if (tgt.classList.contains("faq-container")) {
      toggleFaq();
    }
  }
}

使用vanilla javascript在点击另一个元素后将其添加/删除到另一个元素

2 个答案: