选择下一个元素时自动从上一个元素中删除类名答案

【问题标题】：remove class name automatically from previous element on selecting the next element选择下一个元素时自动从上一个元素中删除类名
【发布时间】：2021-08-18 19:16:14
【问题描述】：

如何在单击另一个 faq-div 后自动从单击的上一个 faq-div 中删除活动类。切换类列表仅在单击时删除活动类名。我尝试过使用 .contains、!e.target 但似乎没有任何效果。

[<div class="faq">
   <h3 class="faq-question">How many team members can I invite?</h3>
     <p class="faq-answer">
       You can invite up to 2 additional users on the
       <a href="#!" class="link-free">Free</a> plan. There is no limit on
       team members for the
              <a href="#!" class="link-premium">Premium </a>plan.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">What is the maximum file upload size?</h3>
            <p class="faq-answer">
              No more than 2GB. All files in your account must fit your allotted
              storage space.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">How do I reset my password?</h3>
            <p class="faq-answer">
              Click “Forgot password” from the login page or “Change password”
              from your profile page. A reset link will be emailed to you.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">Can I cancel my subscription?</h3>
            <p class="faq-answer">
              Yes! Send us a message and we’ll process your request no questions
              asked.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>][1]

const btns = document.querySelectorAll('.faq-toggle');
const questions = document.querySelectorAll('.faq-question');

const callEvent = (els, className) => {
  els.forEach((el) => {
    el.addEventListener('click', () => {
      el.parentNode.classList.toggle(className);
    });
  });
};

callEvent(btns, 'active);
callEvent(questions, 'active);

【问题讨论】：

标签： javascript events toggle

【解决方案1】：

const faqs = document.querySelectorAll('.faq'); //all faq nodes list

const callEvent = (els) => {
  els.forEach((el) => {
    el.addEventListener('click', (e) => {
      faqs.forEach(f => f.classList.remove("active")); //removing 'active' class from all faq nodes
      el.parentNode.classList.toggle('active');
    });
  });
};

【讨论】：

【解决方案2】：

您还必须从其他元素中删除“活动”。例子：

const btns = document.querySelectorAll('.faq-toggle');
const questions = document.querySelectorAll('.faq-question');

const callEvent = (els) => {
  els.forEach((el) => {
    el.addEventListener('click', (e) => {
      el.parentNode.classList.toggle('active');
      // Here you also have to remove 'active' from the other elements
      els.forEach(lm => lm !== el && lm.parentNode.classList.remove('active'));
    });
  });
};

callEvent(btns);
callEvent(questions);

.active {
  color: red;
}

<div class="faq">
   <h3 class="faq-question">How many team members can I invite?</h3>
     <p class="faq-answer">
       You can invite up to 2 additional users on the
       <a href="#!" class="link-free">Free</a> plan. There is no limit on
       team members for the
              <a href="#!" class="link-premium">Premium </a>plan.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">What is the maximum file upload size?</h3>
            <p class="faq-answer">
              No more than 2GB. All files in your account must fit your allotted
              storage space.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">How do I reset my password?</h3>
            <p class="faq-answer">
              Click “Forgot password” from the login page or “Change password”
              from your profile page. A reset link will be emailed to you.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">Can I cancel my subscription?</h3>
            <p class="faq-answer">
              Yes! Send us a message and we’ll process your request no questions
              asked.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>

【讨论】：