使用jQuery处理图片加载错误，循环中ID获取异常如何解决？

你的核心问题是循环中使用var声明变量导致的闭包共享问题，加上用字符串拼接DOM的方式无法动态修改已插入的图片元素。以下是具体修复方案：

问题根源 #

1. var声明的变量没有块级作用域，循环里所有的error回调函数共享同一个organ_data_id和imgPath变量，等循环结束后触发error事件时，这些变量已经是最后一次循环的结果。
2. 你用字符串拼接生成img标签，即使在error里修改了imgPath变量，也不会影响已经插入页面的DOM元素——因为字符串已经被解析成静态DOM节点了。

修复后的代码 #

for (let i = 0; i < organisers_data.length; i++) {
  // 用let/const声明变量，确保每个循环迭代有独立的绑定
  const organ_data_id = organisers_data[i].id.replaceAll(/^0+(?!$)/g, "");
  
  // 直接创建img DOM元素，而非字符串
  const $img = $('<img>', {
    src: `/assets/images/organisers/${organ_data_id}.jpg`
  });

  // 绑定error事件，this指向当前出错的img元素
  $img.on('error', function() {
    $(this).attr('src', `/assets/images/organisers/${organ_data_id}.png`);
  });

  // 构建容器并插入页面
  const $container = $('<div>').append(
    $('<a>', { href: "" }).append($img)
  );

  $('.organisers_table').append($container);
}

关键改动说明 #

• 用let声明循环变量i，用const声明organ_data_id：每个循环迭代会创建独立的变量绑定，error回调能正确获取当前迭代的ID值。
• 直接创建jQuery img对象：避免字符串拼接的静态化问题，error触发时可以直接通过$(this)修改当前图片的src属性，实现格式切换。
• 移除多余的if ($('.organisers_table'))判断：jQuery选择器始终返回jQuery对象，该判断没有实际意义，直接调用append即可。

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