jQuery选择题测验重复加分Bug修复技术求助

问题根源 #

你的代码中，用户完成某题的作答判定后，仍可多次点击正确答案，每次点击都会触发checkAnswer函数并重复累加分数。之前尝试用$('.answer-box').prop('disabled', true)失败，是因为.answer-box是<div>元素，disabled属性仅对表单控件（如<button>、<input>）生效，对div无效，因此会报错且破坏正常交互。

修复方案 #

下面提供三种简单有效的修复思路，你可根据需求选择：

方案一：添加题目作答状态标记

通过变量标记当前题目是否已完成作答，避免重复触发评分逻辑。

1. 新增全局变量：

var currentQuestion = 0;
var totalQuestions = quizData.length;
var score = 0;
var questionAnswered = false; // 新增：标记当前题目是否已作答

2. 修改checkAnswer函数，开头加入判断：

function checkAnswer(selectedAnswer){
  // 如果当前题目已作答，直接返回，避免重复评分
  if(questionAnswered) return;
  
  var theCorrectAnswer = quizData[currentQuestion-1].correctAnswer;
  $('.answer-box').removeClass("selected");

  $( ".answer-box" ).each(function( index ) {
    if((index+1)==theCorrectAnswer){
      $( this ).addClass("correct");
    } else {
      $( this ).addClass("incorrect");
    }
  });

  if(selectedAnswer==theCorrectAnswer){
    score += 10;
    $(" .score").html(score);
  }
  
  // 标记当前题目已作答
  questionAnswered = true;
  
  $("#next-btn").removeClass("hidden");
  $("#feedback").removeClass("hidden");
}

3. 在nextQuestion函数开头重置标记，确保下一题可正常作答：

function nextQuestion(){
  // 重置作答状态
  questionAnswered = false;
  currentQuestion++;
  
  // 后续原有代码不变...
}

方案二：临时解绑答案点击事件

用户作答后解绑所有答案的点击事件，切换题目时重新绑定。

1. 将答案点击事件封装为可复用函数：

function bindAnswerEvents(){
  $('#answer1').off('click').click(function(){
    $(this).addClass("selected");
    setTimeout(function() {
        checkAnswer(1);
    },1000);
  });
  $('#answer2').off('click').click(function(){
    $(this).addClass("selected")
    setTimeout(function() {
        checkAnswer(2);
    },1000);
  });
  $('#answer3').off('click').click(function(){
    $(this).addClass("selected")
    setTimeout(function() {
        checkAnswer(3);
    },1000);
  });
}

2. 初始化时调用绑定函数：

// 替换原有单独绑定的代码
bindAnswerEvents();

$('#next-btn').click(function(){
  nextQuestion();
});
nextQuestion();

3. 在checkAnswer末尾解绑事件：

function checkAnswer(selectedAnswer){
  // 原有代码...
  
  $("#next-btn").removeClass("hidden");
  $("#feedback").removeClass("hidden");
  
  // 解绑所有答案的点击事件，防止重复点击
  $('.answer-box').off('click');
}

4. 在nextQuestion函数结尾重新绑定事件：

function nextQuestion(){
  currentQuestion++;
  
  // 原有代码...
  
  showQuestion();
  
  // 原有代码...
  
  // 重新绑定答案点击事件
  bindAnswerEvents();
}

方案三：添加CSS类阻止点击（视觉+交互）

通过CSS禁用点击交互，同时给用户视觉反馈。

1. 在CSS中添加类：

.unclickable {
  pointer-events: none; /* 阻止点击事件 */
  opacity: 0.7; /* 视觉上标记为不可点击 */
}

2. 在checkAnswer末尾添加类：

function checkAnswer(selectedAnswer){
  // 原有代码...
  
  $("#next-btn").removeClass("hidden");
  $("#feedback").removeClass("hidden");
  
  // 给所有答案添加不可点击类
  $('.answer-box').addClass('unclickable');
}

3. 在nextQuestion中移除类：

function nextQuestion(){
  currentQuestion++;
  
  // 原有代码...
  
  showQuestion();
  
  // 原有代码...
  
  // 移除不可点击类，恢复交互
  $('.answer-box').removeClass('unclickable');
}

推荐方案 #

方案一逻辑最简单，侵入性最低，适合你的现有代码结构；如果需要更彻底的交互限制，可以结合方案三一起使用，既防止重复评分，又给用户清晰的视觉反馈。

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