多组试题队列仅一组正常加载的前端技术问题求助

核心问题推测 #

大概率是函数间的全局变量未隔离或DOM选择器未针对板块ID做限定导致的——仅改函数名但没彻底隔离两组试题的状态和DOM操作范围，会造成后执行的函数覆盖前一组的状态，或者始终操作同一组DOM元素，最终只有第一组生效。

具体排查修复步骤 #

1. 检查全局变量是否重复
   打开iscript.js，看iterate和iterate2内部是不是用了相同的全局变量（比如currentQuestionIndex、questionQueue这类）。如果是，两组试题会共用同一状态，自然只有一组能正常跑。

   • 修复：把每组试题的状态变量封装到函数内部闭包，或者给变量加板块ID前缀（比如currentIndex_section1、queue_section2），彻底隔离状态。

2. 确认DOM选择器是否绑定对应板块ID
   检查两个函数里获取试题容器、按钮的代码，有没有写死固定ID（比如document.getElementById('section1')），而iterate2没改成对应板块的ID（比如section2）。要是选择器没限定到当前板块，两组函数都会往同一个DOM元素塞内容，当然只有第一组能显示。

   • 修复：把板块ID作为参数传入函数，让函数根据ID定位对应DOM：

     function iterate(sectionId) {
       const container = document.getElementById(sectionId);
       const questionEl = container.querySelector('.question');
       // 后续所有DOM操作都基于container，别全局选元素
     }
     // 调用时传对应板块ID
     iterate('section1');
     iterate2('section2');
     

3. 检查事件绑定是否冲突
   如果两组试题的提交按钮用了相同类名，且事件绑定没限定到当前板块，后绑定的事件会直接覆盖前一组的。比如全局绑定.submit-btn，只会保留最后一次绑定的逻辑。

   • 修复：基于当前板块容器选择按钮再绑定事件：

     const submitBtn = container.querySelector('.submit-btn');
     submitBtn.addEventListener('click', () => handleSubmit(sectionId));
     

4. 验证iframe跨页面通信逻辑
   因为试题在iframe.html、统计在home.html，要确认两组试题的通信有没有用相同标识（比如消息类型），导致统计逻辑只处理第一组的消息。

   • 修复：postMessage时带上板块ID作为标识，接收消息时按ID区分统计：

     // iframe内发消息
     window.parent.postMessage({
       type: 'answerResult',
       sectionId: 'section1',
       isCorrect: true
     }, '*');
     // home.html接收消息
     window.addEventListener('message', (e) => {
       if (e.data.sectionId === 'section1') {
         // 更新section1的对错统计
       } else if (e.data.sectionId === 'section2') {
         // 更新section2的对错统计
       }
     });
     

优化建议 #

别写iterate、iterate2这种重复代码，把试题逻辑封装成可复用的工厂函数，彻底隔离每组试题的状态和DOM范围：

function createQuiz(sectionId, questionList) {
  let currentIndex = 0;
  const container = document.getElementById(sectionId);
  
  // 加载当前试题
  function loadQuestion() {
    const question = questionList[currentIndex];
    container.querySelector('.question').textContent = question.title;
    // 渲染选项逻辑...
  }
  
  // 提交处理
  function handleSubmit() {
    // 校验答案逻辑
    currentIndex++;
    if (currentIndex < questionList.length) {
      loadQuestion();
    } else {
      // 试题完成后的逻辑
    }
  }
  
  container.querySelector('.submit-btn').addEventListener('click', handleSubmit);
  loadQuestion();
}

// 初始化两组试题
createQuiz('section1', questions1);
createQuiz('section2', questions2);

内容的提问来源于stack exchange，提问作者Lexi