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

Replacing an image with another in jquery using classes and IDs

本文关键字：图像 一个 替换 另一个 jquery ID      更新时间：2023-09-26

我知道这个问题以前已经回答过，但即使查阅了这些链接，我仍然无法解决我的问题。我想用一个类将我的图像（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，图标和图像;它们都给了我想要的东西。但是，当我将鼠标悬停在图像上时，它仍然没有被替换。我也没有收到任何错误。我做错了什么？非常感谢！

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

  1. 要按元素 id 进行选择，您需要#前缀，因此$("#" + id)不$(id) 。

  2. 您不希望.find() this因为该图像已经是有问题的图像。

  3. html中的图像路径以"assets"开头，但您不会将其包含在Javascript中。

  4. 如果只提供一个函数.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";
});

您需要更正选择器。.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.
});

Demo：http：//jsfiddle.net/GCu2D/521/

试试这个 

$(".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 选择器不正确

相关文章：