Javascript构建动态测验题：单选时其他题目选中状态丢失求解

云原生阿岚

2026-10-3

问题解决方案

问题原因

原有代码点击选项时使用$('.pilihan').not(this)选中了页面内所有选项，修改了所有非当前点击选项的背景色，因此切换题目选择时会清空之前所有题目的选中状态。

修改步骤

1. 调整题目生成逻辑，给每道题添加独立容器

修改showQuestion函数，将每道题的题干和选项都包裹在单独的.question-item容器中，方便后续按题区分选项范围。

2. 修改点击事件的样式重置范围

点击选项时仅重置当前题目内的其他选项样式，不影响其他题的选中状态。

完整修改后代码

function showQuestion(){
    for(let i = 0; i < QuesPartA.length; i++){
      // 新增每道题的独立容器
      const $questionItem = $('<div class="question-item"></div>');
      $questionItem.append('<div class="Question">Number '+ parseInt(i+1) +'</div>');
      QuesPartA[i]['option'].forEach(option => {
          $questionItem.append('<span class="pilihan">'+option +' </span><br>');  
      });
      // 把整道题插入到questionBox
      $(".questionBox").append($questionItem);
  } 

  $(".secondBox").append('<a href="Listening Part A.html" class="btnToPartB">Continue to Part B</a>');
};

$(".questionBox").on("click", ".pilihan", function() {
  // 定位当前选项所属的题目容器，仅重置该题下的其他选项
  const $currentQuestion = $(this).closest('.question-item');
  $(this).css("background", "red");
  $currentQuestion.find('.pilihan').not(this).css("background", "#ccc");
});