点击切换图片，点击另一张图片时恢复原图的JS实现求助

核心逻辑 #

• 点击任意图片时，先把所有图片恢复为原图
• 再单独切换当前点击图片的状态（原图 ↔ 切换图）

修改后的完整代码 #

function changeImage(currentImg) {
  // 获取页面上所有图片元素
  const allImages = document.querySelectorAll('img');
  
  // 遍历所有图片，统一恢复成原图
  allImages.forEach(img => {
    img.src = "resources/items/original_image.png";
  });
  
  // 切换当前点击图片的状态
  // 用endsWith判断路径后缀，避免浏览器自动补全全URL导致判断失败
  if (currentImg.src.endsWith("original_image.png")) {
    currentImg.src = "resources/items/icon2blue.png";
  } else {
    currentImg.src = "resources/items/original_image.png";
  }
}

原代码的问题 #

原代码只处理了当前点击的图片，没有同步重置其他图片的状态，所以点击新图片时，之前切换过的图片不会自动恢复。

新手注意事项 #

• 页面里需要交互的图片，都要绑定这个点击函数，比如：

  <img src="resources/items/original_image.png" onclick="changeImage(this)">
  

• 用endsWith判断路径是因为浏览器会把相对路径转成完整URL（比如http://你的域名/resources/items/original_image.png），直接匹配全字符串会失效，后缀匹配更稳定。

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