使用类和ID在jquery中用另一个图像替换图像答案

【问题标题】：Replacing an image with another in jquery using classes and IDs使用类和ID在jquery中用另一个图像替换图像
【发布时间】：2015-01-10 05:16:05
【问题描述】：

我知道这个问题之前已经回答过了，但是即使在查阅了这些链接之后，我仍然无法解决我的问题。我想用一个类将我的图像（assets/img/social-mail.jpg）替换为另一个（assets/img/social-mail-hover.jpg），因为我有多个图像我想这样做.我的基本思路是这样的：当类悬停时，获取 ID，并通过在其图像链接中添加“-hover”来替换其图像。

HTML：

<img id="social-mail" class="box-social" src="assets/img/social-mail.jpg">

JS：

$(".box-social").hover(function(e) {
    var id = $(this).attr("id");
    var icon = id.split("-")[1];
    var image = "img/social-" + icon + "-hover.jpg";
    $(id).find("img").attr("src", image);
});

我测试了 id、icon 和 image；他们都给了我我想要的东西。但是，当我将鼠标悬停在图像上时，它仍然没有被替换。我也没有收到任何错误。我究竟做错了什么？非常感谢！

【问题讨论】：

它需要是$(this) 或$('#'+id) 才能使其成为合适的id 选择器...但是为此使用图像精灵和CSS！
您将路径称为“assets/img/..”，但在您正在执行的脚本中：var image = "img/social-" + icon + "-hover.jpg"; .你确定你没有丢失路径中的“资产”吗？
你为什么使用.find()？ this 已经引用了当前的 img。也不要使用.attr()：this.src = image; 应该这样做。（另外，当连字符之前实际上是文件名的一部分时，为什么要使用.split() 来表示连字符之后的部分？你不能用一个来完成所有事情吗？线路：this.src = "assets/img/" + this.id + "-hover.jpg";?
@numbers1311407 刚刚添加了它，但它没有用。如果我纯粹将 CSS 与 :hover 一起使用，它会起作用，但我有六张图片并想用 JQuery 尝试一下。
@nnnnnn 说得对。 this 是元素，你不需要 find 任何东西。无论如何，这是 CSS 和包含所有图像的单个图像精灵的典型场景。无需 JS。

标签： javascript jquery html image class

【解决方案1】：

我认为你的函数至少有四个问题：

要按元素 id 选择，您需要 # 前缀，所以 $("#" + id) 而不是 $(id)。
你不想要.find()，因为this已经是有问题的图像。
您在 html 中的图像路径以 "assets" 开头，但您没有在 Javascript 中包含它。
如果您只向.hover() 提供一个函数，则鼠标移入和移出时都会调用该函数。所以你永远不会改变图像。

你的函数的四行可以换成一行：

$(".box-social").hover(function(e) {
  this.src = "assets/img/" + this.id + "-hover.jpg";
});

这解决了上面的问题 1-3。要解决问题 4，只需提供第二个函数以在鼠标离开时将 src 改回：

$(".box-social").hover(function(e) {
  this.src = "assets/img/" + this.id + "-hover.jpg";
}, function(e) {
  this.src = "assets/img/" + this.id + ".jpg";
});

【讨论】：

非常感谢您的帮助！这确实解决了我所有的问题；我绝对应该早点问这个问题。

【解决方案2】：

您需要更正您的选择器。 JS：

$(".box-social").hover(function (e) {
    var id = $(this).attr("id");
    var icon = id.split("-")[1];
    var image = "assets/img/social-" + icon + "-hover.jpg"; //make sure the path is correct
    $('#' + id).attr("src", image); //Changed the selector.
});

演示：http://jsfiddle.net/GCu2D/521/

【讨论】：

感谢您的帮助！我有点困惑，因为我的 js 文件在 assets 中，所以我在争论是否包含 assets。我猜是因为我要替换索引文件中的某些内容，所以我必须包含资产。

【解决方案3】：

试试这个

$(".box-social").hover(function(e) {
    var id = $(this).attr("id");
    var icon = id.split("-")[1];
    var image = "assets/img/social-" + icon + "-hover.jpg";
    $("#"+id).attr("src", image);
});

您在图片链接中忘记了“assets/”，并且您的 img 选择器不正确

【讨论】：