点击同class单个img元素修改src属性失效问题求助

嘿，我懂你现在遇到的困扰——点击那些爱心图标想切换图片，但代码没起作用对吧？咱们来拆解下问题出在哪，然后把它修好～

原代码的核心问题 #

你写的代码里有两个关键错误，都是因为混淆了jQuery对象和原生DOM元素的调用规则：

1. $(this).getAttribute('src')：$(this)是jQuery包装后的对象，而getAttribute是原生DOM元素的方法，jQuery对象没有这个方法，这行代码会直接报错，导致后续逻辑完全跑不起来。
2. $(this).src = "xxx"：同样的，src是原生DOM元素的属性，jQuery对象不能直接通过.访问这个属性，必须用jQuery提供的方法来设置。

修正后的可行方案 #

这里给你几种靠谱的写法，选哪种都能解决问题：

方案1：全程用jQuery的.attr()方法（推荐，直接匹配HTML里的相对路径）

$(document).on('click', '.fave_icon', function (event) {
  // 把当前元素存成jQuery对象，方便重复调用
  const $faveIcon = $(this);
  // 获取HTML里直接写的src属性值
  const currentSrc = $faveIcon.attr('src');
  
  if (currentSrc === "Iconos/heart.png") {
    $faveIcon.attr('src', "Iconos/heart_coloured.png");
  } else {
    $faveIcon.attr('src', "Iconos/heart.png");
  }
});

方案2：直接用原生DOM元素操作

事件回调里的this本身就是触发点击的原生DOM元素，所以可以直接用原生JS的方法：

$(document).on('click', '.fave_icon', function (event) {
  const faveIcon = this; // 原生DOM元素
  
  if (faveIcon.getAttribute('src') === "Iconos/heart.png") {
    faveIcon.src = "Iconos/heart_coloured.png";
  } else {
    faveIcon.src = "Iconos/heart.png";
  }
});

方案3：用jQuery的.prop()方法（注意路径匹配细节）

.prop()获取的是浏览器解析后的完整URL（比如http://你的域名/Iconos/heart.png），所以直接判断相对路径会不成立，这时候可以用indexOf检查文件名：

$(document).on('click', '.fave_icon', function (event) {
  const $faveIcon = $(this);
  const currentSrc = $faveIcon.prop('src');
  
  if (currentSrc.indexOf("heart.png") !== -1) {
    $faveIcon.prop('src', "Iconos/heart_coloured.png");
  } else {
    $faveIcon.prop('src', "Iconos/heart.png");
  }
});

额外小技巧 #

如果担心路径大小写或者后缀名变化，也可以用endsWith来精准匹配文件名：

if (currentSrc.endsWith("heart.png")) {
  // 切换成彩色图标
}

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