JS实现图片点击切换后无法切回原图，如何修正判断条件？

你的问题出在两个核心错误上：

• 误用了未定义的img变量，函数接收的点击元素参数是image，你却用img来做判断，导致条件永远不成立
• 错误使用了jQuery的attr()方法（如果没引入jQuery还会直接报错），原生JS直接访问DOM元素的src属性即可实现判断

修正后的JS代码 #

function ratesD(image) {
  const originalSrc = "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png";
  const newSrc = "https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png";
  
  // 直接用传入的image参数访问src属性做判断
  if (image.src === originalSrc) {
    image.src = newSrc;
  } else {
    image.src = originalSrc;
  }
}

关键修改说明 #

1. 替换判断对象：把img.attr('src')改成image.src，函数的image参数就是点击的图片DOM元素，直接访问它的src属性即可获取当前图片地址
2. 优化代码可读性：把两张图的地址存成常量，后续修改地址只需更改常量值，不用在代码里重复查找
3. 严格相等判断：用===替代==，避免类型转换带来的意外判断错误

HTML部分无需修改，保持原代码即可正常运行。

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