jQuery on事件委托绑定动态span点击，如何仅被点击元素修改背景色

云原生阿岚

2026-10-4

动态生成span点击单元素改背景色解决方案

问题原因

原代码的点击事件逻辑中，调用document.getElementsByClassName("pilihan")选中了页面所有带有pilihan类的元素，遍历后统一设置背景色，因此会出现点击一个元素、所有同类元素都变色的问题。

修改方案

只需修改事件回调逻辑，直接操作当前被点击的元素即可，jQuery事件回调中this默认指向触发事件的目标元素，修改后的代码如下：

核心修改代码（仅点击事件部分）

$(".questionBox").on("click", "span.pilihan", function() {
  // 若需要实现单选效果（点击当前选项后清空其他选项的选中色），可取消注释下一行
  // $(".pilihan").css("backgroundColor", "transparent");
  // 仅修改当前点击的span元素背景色
  $(this).css("backgroundColor", "red");
});

完整修改后代码

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", "span.pilihan", function() {
  // 若需要实现单选效果（点击当前选项后清空其他选项的选中色），可取消注释下一行
  // $(".pilihan").css("backgroundColor", "transparent");
  // 仅修改当前点击的span元素背景色
  $(this).css("backgroundColor", "red");
});