JavaScript图片交互功能实现咨询：点击单张替换指定图片，切换点击时恢复原图片

你现在的代码能实现点击替换图片，但缺少恢复之前被替换图片的逻辑对吧？我来帮你调整一下，核心思路是要记住每张图片的原始地址，同时跟踪当前被替换的图片，这样点击新图片时就能先恢复旧的，再替换新的。

关键改动点： #

• 给每张图片保存原始的src地址，这里用元素的dataset属性来存储，方便后续取用
• 用一个变量记录当前处于"替换状态"的图片，点击新图片时先恢复它
• 修改点击事件函数，增加状态判断和恢复逻辑

修改后的完整代码 #

HTML部分（仅添加了基础样式优化）

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 给图片加些交互样式，提升体验 */
    img {
      width: 400px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.2s;
      margin: 10px 0;
    }
    img:hover {
      border-color: #666;
    }
  </style>
  <script src='script.js' defer></script>
</head>
<body>
  <h1>Click for a present:</h1>
  <img src="https://timviec365.com/pictures/images/coder-la-gi-3.jpg">
  <h1>Hello World</h1>
  <img src="https://img.timviec.com.vn/2020/10/coder-la-gi-2.jpg">
</body>
</html>

JavaScript部分

// 定义要替换的目标图片地址
const targetImageSrc = 'https://i2.wp.com/gsviec.com/wp-content/uploads/2020/02/coder-dev-1.jpeg?fit=900%2C500&ssl=1';
// 记录当前处于替换状态的图片元素
let currentActiveImage = null;

function openPresent(event) {
  const clickedImage = event.target;
  
  // 如果点击的是已经被替换的图片，可选择什么都不做，或者恢复它（取消下面注释即可实现点击恢复）
  if (clickedImage === currentActiveImage) {
    // resetActiveImage();
    return;
  }
  
  // 先恢复之前被替换的图片
  resetActiveImage();
  
  // 替换当前点击的图片，并更新状态记录
  clickedImage.src = targetImageSrc;
  currentActiveImage = clickedImage;
}

// 专门用于恢复当前替换图片的函数
function resetActiveImage() {
  if (currentActiveImage) {
    currentActiveImage.src = currentActiveImage.dataset.originalSrc;
    currentActiveImage = null;
  }
}

// 初始化：给每张图片绑定事件并保存原始src
const images = document.querySelectorAll('img');
images.forEach(img => {
  // 把原始图片地址存到自定义属性里
  img.dataset.originalSrc = img.src;
  img.addEventListener('click', openPresent);
});

代码说明： #

1. dataset.originalSrc：初始化时把每张图片的原始src存储到这个自定义属性中，后续恢复图片时直接取用
2. currentActiveImage：用来跟踪当前哪张图片处于替换状态，确保每次点击新图片时，能先把之前的图片恢复原状
3. resetActiveImage()：把恢复逻辑单独抽成函数，让代码结构更清晰，负责将替换状态的图片还原为原始样式

这样就能实现你想要的交互：点击任意一张图片替换为指定图，点击另一张时，前一张自动恢复原始状态，当前点击的图片替换为目标图~

内容的提问来源于stack exchange，提问作者Nguyễn Minh Đức