Question

我知道此问题之前已得到解答，但即使在查阅这些链接后，我仍然无法解决我的问题。我想用一个类替换我的图像（assets / img / social-mail.jpg）到另一个（assets / img / social-mail-hover.jpg），因为我有多个图像我想这样做。我的基本思维过程是这样的：当课程悬停时，取出ID，并通过添加＆＃34; -hover＆＃34;将其图像替换为另一个。到它的图像链接。

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

Answer 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";
});

Answer 2

试试这个

$(".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);
});

你忘了＆＃34;资产/＆＃34;在您的图片链接中，您的img选择器不是正确的

Answer 3

您需要更正选择器。 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/

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

3 个答案: