使用类和 ID 将 jquery 中的图像替换为另一个图像

Question

我知道这个问题之前已经有人回答过，但是即使参考了那些link，我仍然无法解决我的问题。我想用一个 class 将我的图片 (assets/img/social-mail.jpg) 替换为另一个 (assets/img/social-mail-hover.jpg)，因为我有多个图片我想做这个到。我的基本思维过程是这样的：当 class 悬停时，获取 ID，并通过在其图像 link.

中添加“-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；他们都给我我想要的东西。但是，当我将鼠标悬停在图像上时，它仍然没有被替换。我也没有收到任何错误。我究竟做错了什么？非常感谢！

Answer 1

试试这个

$(".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/" link 并且您的 img 选择器不正确

Answer 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/

Answer 3

我认为你的功能至少有四个问题：

到 select by element 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";
});

使用类和 ID 将 jquery 中的图像替换为另一个图像

Replacing an image with another in jquery using classes and IDs

html

javascript

jquery

image

class

使用 类 和 ID 将 jquery 中的图像替换为另一个图像

Replacing an image with another in jquery using classes and IDs

html

javascript

jquery

image

class

使用类和 ID 将 jquery 中的图像替换为另一个图像