如何使用jQuery动态切换图片src：点击按钮切换对应图片并重置其他图片

原代码问题梳理 #

• HTML规范错误：id属性全局唯一，多个元素共用同一个swap_this id会导致选择器只能匹配到第一个出现的img元素，无法正确定位点击按钮对应的目标图片
• jQuery语法错误：attr()方法调用格式错误，配置对象内属性值后不应该加分号，同时写死了img-001-b.jpg路径无法适配不同编号的图片
• 逻辑缺失：没有实现「其余所有图片重置为a版本」的逻辑

正确实现方案 #

方案1：兼容现有HTML结构 #

不需要修改你当前的HTML代码，直接替换原有jQuery代码即可：

jQuery(document).ready(function($) {
  $(".button").click(function(){
    // 定位当前点击按钮对应的同层级图片元素
    const $targetImg = $(this).siblings("img");
    // 提取当前图片的编号（如001、002）
    const imgSerial = $targetImg.attr("src").match(/img-(\d+)-/)[1];
    // 所有图片统一重置为a版本
    $("img").each(function() {
      const originalSrc = $(this).attr("src");
      $(this).attr("src", originalSrc.replace(/-b\.jpg$/, "-a.jpg"));
    });
    // 仅将当前点击对应的图片替换为b版本
    $targetImg.attr("src", `img-${imgSerial}-b.jpg`);
  });
});

方案2：规范HTML结构优化版（推荐） #

首先修改HTML，移除重复的id，给需要切换的图片统一加类名，避免影响页面其他无关图片：

<div>
    <img class="switchable-img" src="img-001-a.jpg">
    <a class="button">Change-IMG</a>
</div>
<div>
    <img class="switchable-img" src="img-002-a.jpg">
    <a class="button">Change-IMG</a>
</div>
<div>
    <img class="switchable-img" src="img-003-a.jpg">
    <a class="button">Change-IMG</a>
</div>

对应调整jQuery的图片选择器即可：

jQuery(document).ready(function($) {
  $(".button").click(function(){
    const $targetImg = $(this).siblings(".switchable-img");
    const imgSerial = $targetImg.attr("src").match(/img-(\d+)-/)[1];
    // 仅修改需要切换的目标类图片，不影响其他图片
    $(".switchable-img").each(function() {
      const originalSrc = $(this).attr("src");
      $(this).attr("src", originalSrc.replace(/-b\.jpg$/, "-a.jpg"));
    });
    $targetImg.attr("src", `img-${imgSerial}-b.jpg`);
  });
});

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