如何实现多个迭代生成的动态元素中仅被点击元素变色

实现方法 #

你需要使用jQuery的事件委托机制解决动态元素的事件绑定问题，同时通过$(this)指向当前触发事件的元素，避免修改所有匹配元素的样式：

1. 推荐方案：事件委托（性能最优，适配所有后续动态新增的元素）
   直接在全局添加以下事件绑定代码即可，不需要修改原有showQuestion的逻辑：

// 委托已存在的父容器.questionBox处理子元素.pilihan的点击事件
$('.questionBox').on('click', '.pilihan', function() {
  // 若需要单选效果（仅保留最近点击的选项为红色），保留下一行；允许多选则删除
  $('.pilihan').css('background', 'transparent');
  // 仅修改当前点击元素的背景色
  $(this).css('background', 'red');
});

2. 可选方案：生成元素时直接绑定事件
   如果不想用事件委托，也可以修改你动态生成span的逻辑，生成时逐个绑定点击事件：

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 => {
      // 创建元素时直接绑定点击事件
      const $optionSpan = $('<span class="pilihan"></span>')
        .text(option + ' ')
        .on('click', function() {
          $(this).css('background', 'red');
        });
      $(".questionBox").append($optionSpan).append('<br>');  
    });
  } 
  $(".secondBox").append('<a href="Listening Part A.html" class="btnToPartB">Continue to Part B</a>');
};

逻辑说明 #

• 事件委托的原理是利用事件冒泡，把事件绑定到页面初始就存在的父容器上，所有子元素的事件都会向上冒泡到父容器，再匹配触发对象是否符合选择器，不需要每次新增元素都重新绑定事件，性能更好。
• $(this)在事件回调中永远指向本次触发事件的DOM元素，所以只会修改当前点击的span样式，不会影响其他同类元素。

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