为元素分配唯一ID并使用jQuery单独定位元素

我看了你的代码，发现几个需要调整的点——尤其是你想要单独处理每个.pass-fail-icon元素的需求，原写法里直接全局选择.pass-fail-icon会匹配所有该类元素，hasClass()只会检查第一个元素的类状态，没法实现逐个元素的独立操作。下面给你修正和优化后的方案：

批量检查并更新所有元素 #

如果你的场景是批量遍历所有.pass-fail-icon元素，根据它们的类状态切换图片，可以用.each()遍历每个元素，单独处理：

function checkPassed() { 
  // 遍历每个.pass-fail-icon元素，逐个处理
  $(".pass-fail-icon").each(function() {
    const $currentIcon = $(this); // 获取当前遍历到的单个元素
    const $iconImg = $currentIcon.find('img'); // 精准定位当前元素内的图片
    const failImageSrc = 'img/Fail.svg'; 
    const passImageSrc = 'img/Pass.svg';

    if ($currentIcon.hasClass("passed")) {
      // 当前元素有"passed"类，切换为通过图片
      $iconImg.attr('src', passImageSrc);
    } else {
      // 无"passed"类，切换为失败图片
      $iconImg.attr('src', failImageSrc);
    }
  });
}

关键优化点： #

• 用.each()遍历每个目标元素，确保每个元素都被独立判断和修改
• 用$(this)指代当前遍历的元素，避免全局选择带来的批量修改问题
• 用.find('img')定位当前元素内部的图片，比通过src属性选择更可靠（不会因为路径差异或缓存导致选择失败）

单个元素点击切换场景 #

如果你的需求是点击单个.pass-fail-icon时切换它的状态和图片，可以给每个元素绑定点击事件，只修改当前点击的元素：

// 给每个.pass-fail-icon绑定点击事件
$(".pass-fail-icon").on('click', function() {
  const $clickedIcon = $(this);
  const $iconImg = $clickedIcon.find('img');
  const failImageSrc = 'img/Fail.svg'; 
  const passImageSrc = 'img/Pass.svg';

  // 先切换"passed"类的状态
  $clickedIcon.toggleClass("passed");
  
  // 根据切换后的类状态更新图片
  $iconImg.attr('src', $clickedIcon.hasClass("passed") ? passImageSrc : failImageSrc);
});

动态元素的兼容处理 #

如果你的.pass-fail-icon元素是动态生成的（比如通过AJAX加载），需要用事件委托来绑定事件，确保新生成的元素也能响应：

// 事件委托：绑定到父容器（或document），处理动态生成的元素
$(document).on('click', ".pass-fail-icon", function() {
  const $clickedIcon = $(this);
  const $iconImg = $clickedIcon.find('img');
  const failImageSrc = 'img/Fail.svg'; 
  const passImageSrc = 'img/Pass.svg';

  $clickedIcon.toggleClass("passed");
  $iconImg.attr('src', $clickedIcon.hasClass("passed") ? passImageSrc : failImageSrc);
});

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