如何用jQuery实现img标签src切换（鼠标悬停切换至rel属性图片）

我来帮你搞定这个图片悬停切换的问题！你之前的脚本大概率是因为没有正确指代当前触发事件的图片元素（比如错误用了element而不是$(this)），导致切换逻辑失效。下面给你一套完整且可靠的实现方案，先聚焦悬停切换，同时也包含移出恢复的逻辑：

第一步：确保你的HTML结构正确 #

首先要保证img标签同时有src（初始图片）和rel（悬停图片）属性，示例如下：

<img src="default-image.jpg" rel="hover-image.jpg" alt="产品图片">

第二步：编写正确的jQuery代码 #

下面的代码会帮你实现悬停切换、移出恢复的功能，重点解决你提到的元素指代问题：

$(document).ready(function() {
  // 给所有带有rel属性的图片绑定悬停事件
  $('img[rel]').hover(
    // 鼠标悬停时执行：切换到rel指定的图片
    function() {
      // 把初始src存储到元素的data属性里（只存一次，避免重复覆盖）
      if (!$(this).data('originalSrc')) {
        $(this).data('originalSrc', $(this).attr('src'));
      }
      // 切换src为rel属性的值
      $(this).attr('src', $(this).attr('rel'));
    },
    // 鼠标移出时执行：切回初始图片（如果你暂时只需要悬停切换，可以删掉这个函数）
    function() {
      // 从data属性中取出初始src并设置回去
      $(this).attr('src', $(this).data('originalSrc'));
    }
  );
});

关键知识点解释 #

• 用$(this)指代当前元素：这是你之前可能出错的核心点！$(this)在事件处理函数里，会精准指向当前触发悬停事件的那个img标签，避免了错误使用全局element导致的元素混淆。
• 用data()存储初始src：把初始图片路径存在元素自身的data属性中，不需要额外的全局变量，每个图片都能独立保存自己的初始值，更安全可靠。
• 只存储一次初始src：通过!$(this).data('originalSrc')的判断，确保初始路径只会在第一次悬停时存储，不会每次悬停都覆盖。

如果现在你只想先实现悬停切换的功能，只保留hover的第一个函数即可，但建议后续加上移出恢复的逻辑，让交互更完整。

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