如何使用jQuery实现点击指定图片完成图片资源替换的功能

核心问题说明 #

原有代码逻辑与需求反向：点击源图片时直接批量修改所有素材图片的src，不符合「先选中待修改的源图片、再选中替换素材，最终替换源图片内容」的预期。

实现思路 #

• 声明全局临时变量，存储当前选中的待替换源图片元素
• 点击源图片时，记录当前选中元素，可添加视觉标识（如边框）提示用户当前选中状态
• 点击素材图片时，若存在已选中的源图片，直接将源图片的src替换为当前点击的素材图片的src即可完成需求

完整优化代码 #

HTML 部分（修正了原代码中tr直接嵌套在div中的不规范结构，同时给源图片新增公共类方便绑定事件） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* 可选：选中的源图片加边框提示 */
.source-img.active {
  border: 2px solid #f00;
}
</style>

<table>
  <tr>
    <td><img src="https://avatarko.ru/img/avatarka/100na100/mults_dobicha_ognya.gif" class="source-img" id="img-1"></td>
    <td><img src="https://avatarko.ru/img/avatarka/100na100/animaciya.gif" class="source-img" id="img-2"></td>
  </tr>
</table>

<table>
  <tr>
    <td><img src="https://avatarko.ru/img/avatarka/100na100/risunki_svecha.gif" class="click-img" id="select-1"></td>
    <td><img src="https://avatarko.ru/img/avatarka/100na100/risunki_svecha.gif" class="click-img" id="select-2"></td>
  </tr>
</table>

JS 部分 #

$(document).ready(function() {
  // 存储当前选中的待替换源图片
  let selectedSource = null;

  // 绑定所有源图片的点击事件
  $('.source-img').click(function() {
    // 清除其他源图片的选中状态
    $('.source-img').removeClass('active');
    // 记录当前选中的源图片
    selectedSource = $(this);
    // 加选中样式
    $(this).addClass('active');
  });

  // 绑定所有素材图片的点击事件
  $('.click-img').click(function() {
    // 判断是否已经选中了待替换的源图片
    if (selectedSource) {
      // 替换源图片的src为当前点击的素材图片的src
      selectedSource.attr('src', $(this).attr('src'));
      // 可选：替换完成后清除选中状态
      $('.source-img').removeClass('active');
      selectedSource = null;
    }
  });
});

方案优势 #

• 扩展性强：后续新增源图片或者替换素材，仅需要给对应元素添加对应的source-img/click-img类名即可，无需修改JS逻辑
• 交互友好：新增选中状态提示，避免用户误操作
• 代码精简：消除了原代码中重复绑定事件的冗余逻辑，可维护性更高

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