classList的JavaScript问题

Dario 发表于 Dev

166

达里奥

我有一个小问题，以了解为什么我的功能无法正常工作。

我有一个这样的常见问题页面：

<div class="faq_box_after">
    <div class="question_box">
        <p class="question_box_question"><i class="fas fa-plus"></i></p>
        <p class="question_box_answer"></p>
    </div>
    <div class="question_box">
        <p class="question_box_question"><i class="fas fa-plus"></i></p>
        <p class="question_box_answer"></p>
    </div>
    <div class="question_box">
        <p class="question_box_question"><i class="fas fa-plus"></i></p>
        <p class="question_box_answer"></p>
    </div>
    <div class="question_box">
        <p class="question_box_question"><i class="fas fa-plus"></i></p>
        <p class="question_box_answer"></p>
    </div>
    <div class="question_box">
        <p class="question_box_question"><i class="fas fa-plus"></i></p>
        <p class="question_box_answer"></p>
    </div>
    <div class="question_box">
        <p class="question_box_question"><i class="fas fa-plus"></i></p>
        <p class="question_box_answer"></p>
    </div>
    <div class="question_box">
        <p class="question_box_question"><i class="fas fa-plus"></i></p>
        <p class="question_box_answer"></p>
    </div>
</div>

单击.fa-plus时，我需要显示答案；再次单击加号时，我需要隐藏答案；单击另一个加号时，我需要隐藏答案。我在JavaScript中使用此功能：

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

  let plus = document.querySelectorAll('.question_box_question .fas');

  for (let i = 0; i < plus.length; i++) {

    plus[i].addEventListener('click', function(e) {
      let answer = e.target.parentNode.nextElementSibling;
      let totAnswer = document.querySelectorAll('.question_box_answer');
      for (let j = 0; j < totAnswer.length; j++) {
        if (totAnswer[j].classList.contains('active')) {
          totAnswer[j].classList.remove('active');
        }

      }
      answer.classList.toggle('active');

    }, false)

  }
});

因此，如果我删除for循环，即删除所有活动类，则切换工作，但是如果我使用for循环，则切换工作仅显示而不是隐藏。

我尝试了替代方法：

if (answer.classList.contains('active')) {
  answer.classList.remove('active')
} else {
  answer.classList.add('active');
}

但是什么都没有。

伦霍尔姆

关闭打开的答案无效，因为当您循环浏览所有答案时，这包括您要关闭的答案。因此，active该类将从循环中的答案中删除，然后在您运行时再次添加answer.classList.toggle('active')

解决方案是简单地不要active在循环中删除该答案上的类，您可以通过在if语句中包括一个条件来完成该循环，如下所示：

      ...
      for (let j = 0; j < totAnswer.length; j++) {
        if (totAnswer[j] !== answer && totAnswer[j].classList.contains('active')) {
          totAnswer[j].classList.remove('active');
        }

      }
      ...

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。