FAQ页面多按钮事件监听器仅刷新后生效的问题解决求助

嘿，我来帮你分析下问题根源，顺便给你靠谱的解决办法～

首先，咱们得先搞清楚为啥点击其他按钮会失效：

• 你现在的逻辑是每次点击第一个按钮，都会往.faqs容器里重复添加新的FAQ元素，却没有先清空之前的内容，时间久了容器里会堆一堆重复的元素，后续点击其他按钮时，容器内容混乱，自然会影响事件触发。
• 更关键的是，你把搜索输入的input事件监听器写在了按钮的点击事件里面！这意味着每次点击按钮都会给搜索框多绑一次事件，重复绑定的事件会导致逻辑混乱，甚至直接干扰其他按钮的正常运行。
• 要是另外两个按钮的代码逻辑和第一个类似，那它们也会存在同样的重复添加元素、重复绑定事件的问题。

接下来是具体的修复方案，咱们一步步来：

第一步：把通用逻辑抽成独立函数，避免重复代码 #

把创建FAQ元素、搜索功能这些重复的逻辑抽出来，既整洁又能防止重复绑定事件：

// 专门用来渲染FAQ的函数，传入不同的FAQ数据就能生成对应内容
function renderFAQs(faqData) {
  const faqContainer = document.querySelector('.faqs');
  // 重点！先清空容器里的旧内容，避免堆积
  faqContainer.innerHTML = '';

  faqData.forEach((faq) => {
    const faqElement = document.createElement('div');
    faqElement.classList.add('faq');

    const questionElement = document.createElement('div');
    questionElement.classList.add('question');
    questionElement.innerText = ` ${faq.question}`;

    const answerElement = document.createElement('div');
    answerElement.classList.add('answer');
    answerElement.innerText = faq.answer;

    faqElement.appendChild(questionElement);
    faqElement.appendChild(answerElement);

    faqElement.addEventListener('click', () => {
      faqElement.classList.toggle('active');
    });

    faqContainer.appendChild(faqElement);
  });
}

// 搜索功能只绑定一次就够了！
function setupSearch() {
  const searchInput = document.getElementById('searchInput');
  searchInput.addEventListener('input', (event) => {
    const searchTerm = event.target.value.toLowerCase();
    const faqElements = document.querySelectorAll('.faq');

    faqElements.forEach((faqElement) => {
      const question = faqElement.querySelector('.question').innerText.toLowerCase();
      const answer = faqElement.querySelector('.answer').innerText.toLowerCase();

      faqElement.style.display = question.includes(searchTerm) || answer.includes(searchTerm) 
        ? 'block' 
        : 'none';
    });
  });
}

// 页面加载完成后，只初始化一次搜索事件
document.addEventListener('DOMContentLoaded', setupSearch);

第二步：给每个按钮绑定简洁的点击事件 #

现在每个按钮只需要调用上面的renderFAQs函数，传入各自的FAQ数据就行，不用再重复写一堆创建元素的代码：

// 第一个按钮的逻辑
const firstButton = document.querySelector('.faqs-link-firstbutton');
firstButton.addEventListener('click', function() {
  const firstFAQs = [
    {
      question: "What is Code ?",
      answer: "Giving instructions to the computer."
    },
    {
      question: "Can I change my Email ?",
      answer: "Yes you can change your email ."
    },
  ];
  renderFAQs(firstFAQs);
});

// 第二个按钮的示例（替换成你自己的FAQ数据）
const secondButton = document.querySelector('.faqs-link-secondbutton');
secondButton.addEventListener('click', function() {
  const secondFAQs = [
    {
      question: "How to reset password ?",
      answer: "Go to account settings and click 'Reset Password'."
    },
    {
      question: "Is the service free ?",
      answer: "We have both free and premium plans."
    },
  ];
  renderFAQs(secondFAQs);
});

// 第三个按钮同理，传入对应的FAQ数组即可

为啥这样能解决问题？ #

• 每次点击按钮时，renderFAQs会先清空容器旧内容，再添加新元素，不会出现内容堆积的情况；
• 搜索事件只在页面加载时绑定一次，彻底避免了重复绑定导致的逻辑混乱；
• 代码结构更清晰，后续修改或新增按钮也会更方便。

备注：内容来源于stack exchange，提问作者Sane