在Javascript中构建测验:只选择一个动态元素，并能够更改选择

Question

我尝试用动态生成的元素构建一个包含30个问题的测验。

html：

  <div class="secondBox">
           <div class="questionBox">
           </div>
            
  </div>

下面是我的脚本：

function showQuestion(){
    for(let i = 0; i < QuesPartA.length; i++){
      $(".questionBox").append('<div class="Question">Number '+ parseInt(i+1) +'</div>');
      QuesPartA[i]['option'].forEach(option => {
          $(".questionBox").append('<span class="pilihan">'+option +' </span><br>');  
      });
     
  } 

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

$(".questionBox").on("click", ".pilihan", function() {
  $(this).css("background", "red");
  $('.pilihan').not(this).css("background", "#ccc");

因此，动态生成的元素将显示30个问题，每个问题有四个答案选项。我想把选项的颜色改为红色，一旦用户点击，加上改变选择的能力。

我可以使用上面的代码做到这一点:我可以选择问题1的答案(其中一个选项变为红色)，但当我单击2号问题的答案时，问题1中选择的选项将返回#ccc颜色。当我在问题3中选择一个选项时，同样的方式，为2号和1号选择的答案返回到#ccc。

有没有人有什么想法，让我每次点击下一个问题的答案时，前一个问题的答案都是红色的？

提前谢谢。

Answer 1

我相信.not()总是在下面这一行失败：

$('.pilihan').not(this).css("background", "#ccc");

这导致背景被更改为#ccc。

试着去掉那一整行...

$('.pilihan').not(this).css("background", "#ccc");

这也应该会使任何变为红色的线保持红色。