使用jQuery展示简单测验存储变量结果的实现问题求助

核心问题梳理 #

• 变量作用域错误：你当前将Rus/Zin/Duu/Ver/Zor五个得分变量定义在check()函数内部，属于局部变量，每次调用check()都会被重置为0，且函数执行结束后外部无法读取存储的得分值。
• 仅统计了第1题得分：当前check()函数中只读取了q1的选项值，未处理q2到q5的选择结果，总分统计不完整。
• 结果输出逻辑错误：$Rus.show()是完全错误的写法，Rus是存储得分的数值变量，不是DOM元素的jQuery对象，无法调用show()方法，你需要将得分值插入到结果容器#results中展示。
• ID重复不符合规范：所有下一题按钮的ID都设为了button，HTML规范要求ID唯一，虽然不直接影响功能但会导致选择器逻辑有隐患。

修正后的JavaScript代码 #

// 全局定义得分变量，初始值为0
var Rus = 0, Zin = 0, Duu = 0, Ver = 0, Zor = 0;

function check() {
  // 遍历5道题统计得分，每次统计前先重置避免重复计数
  Rus = Zin = Duu = Ver = Zor = 0;
  for(let i=1; i<=5; i++) {
    let selectVal = document.quiz['q'+i]?.value;
    if(!selectVal) continue; // 未答题跳过
    switch(selectVal) {
      case 'Rus': Rus++; break;
      case 'Zin': Zin++; break;
      case 'Duu': Duu++; break;
      case 'Ver': Ver++; break;
      case 'Zor': Zor++; break;
    }
  }
}

$(document).ready(function() {
  // 隐藏所有题目和结果页
  $('.questionForm').hide();
  $('#results').hide();
  // 显示第一题
  $('#q1').show();

  // 简化所有按钮的点击逻辑，无需重复写5次
  $('.questionForm .nextBtn').click(function() {
    let currentQ = $(this).closest('.questionForm').data('question');
    $('.questionForm').hide();
    if(currentQ < 5) {
      $('#q'+(currentQ+1)).show();
    } else {
      // 第五题提交后先统计总得分
      check();
      $('#results').show();
      // 把得分插入结果页展示
      $('#results').html(`
        <h3>测试结果</h3>
        <p>Rustgeving 得分：${Rus}</p>
        <p>Zingeving 得分：${Zin}</p>
        <p>Duurzaamheid 得分：${Duu}</p>
        <p>Verzuiling 得分：${Ver}</p>
        <p>Zorgzaamheid 得分：${Zor}</p>
      `);
    }
    return false;
  });
});

HTML修改说明 #

仅需要把所有题目里的下一题按钮的id="button"替换为class="favorite styled nextBtn"，移除重复ID和冗余的onclick属性即可，修改后的按钮代码示例：

<input class="favorite styled nextBtn" type="button" value="Volgende">

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