JQuery-悬停时替换图像

我有一个图像文件夹。在这个文件夹中，我有两种类型的几个图像；一个

png

和一个

gif

。显示的图像是

png

版本。在图像悬停时，我需要将其替换为其

gif

版本。当鼠标悬停时，将

png

版本放回原位

我目前有以下几种方法可以使用

$(".image-container").mouseover(function () {
    var imgName = $(this).find('img').attr('src');
    var img2 = imgName.substring(0, imgName.lastIndexOf("."));
    $(this).find('img').attr("src", img2+".gif");
}).mouseout(function () {
    var imgName = $(this).find('img').attr('src');
    var img2 = imgName.substring(0, imgName.lastIndexOf("."));
    $(this).find('img').attr("src", img2+".png");
});

这很有效，但我不喜欢我重复事情的方式。有没有办法让这更有效

---

谢谢

如果您将选择器扩展为包含

img

，您可以使用

$（this）

引用它。如果您只是将

gif

替换为

png

（反之亦然），那么使用regex很容易做到这一点

$(".image-container img").mouseover(function (e) {    
    $(this).attr('src', $(this).attr('src').replace(/\.png$/, '.gif'));
}).mouseout(function (e) {
    $(this).attr('src', $(this).attr('src').replace(/\.gif$/, '.png'));
});

---

编辑：请同时查看在

数据-

属性中声明文件名的建议。

我想说的是，以更好的方式使用

数据-*

属性。我建议你吃这样的东西：

<img src="img.png" data-src="img.png" data-hover="img.gif" alt="" class="image-container" />

或者简而言之，您也可以使用

.replace（）

。对于这个简单的替换，您不需要

regex

：

$(".image-container").mouseover(function (e) {    
    $(this).attr("src", $(this).attr("src").replace(".png", ".gif"));
}).mouseout(function (e) {
    $(this).attr("src", $(this).attr("src").replace(".gif", ".png"));
});

---

通过css实现这一点的更好方法

.image-container:hover{
    url: imagepath;

  }

---

使用

css

：悬停

.image容器{
显示：块；
宽度：50px；
高度：50px；
背景：url(http://lorempixel.com/50/50/nature)
，网址(http://lorempixel.com/50/50/cats);
背景大小：100%100%，0%0%；
}
.图像容器：悬停{
背景大小：0%0%，100%100%；
}

只是另一种解决方案

您还可以使用事件处理程序委派并向其传递参数

例如

如果要附加更多事件处理程序，也可以操作此操作

例如

---

浏览一下（但要注意查看他们的常见问题解答，了解主题内容）。使用css类来更改背景url，并在悬停时添加/删除类，更干净、更易于管理。动态图像呢，比如100幅图像。和

url:

？它真的有用吗？伙计，你确定你需要错误的答案吗？+1这个答案的第一部分是总体上更好的架构。代码中的假设越少越好。@Matt谢谢你，伙计<代码>：）在我回答之前，你的速度飞快，投票也很快。我接到一个愚蠢的电话。哈哈。@Matt哦！我真傻，竟然错过了！谢谢你的编辑，谢谢你的推荐<代码>：）

.image-container:hover{
    url: imagepath;

  }

function replaceImageHandler(ev)
{
    var $img = $(this).find('img');
    var imgSrc = $img.attr('src');
    var toImg = imgSrc.substring(0, imgSrc.lastIndexOf(".")) + '.' + ev.data.ext;
    $img.attr('src', toImg)
}

$(".image-container")
    .on('mouseover', { ext: 'gif'}, replaceImageHandler)
    .on('mouseout', { ext: 'png'}, replaceImageHandler);

function replaceImageHandler(ev)
{
    var $img = $(this).find('img');
    $img.attr('src', ev.data.src);
}

$(".image-container")
    .on('click', { src: 'zoom-my-image.gif'}, replaceImageHandler)
    .on('mouseover', { src: 'my-image-1.gif'}, replaceImageHandler)
    .on('mouseout', { src: 'my-image-2.png'}, replaceImageHandler);