Question

我有一个简单的功能，可以在鼠标悬停时更改图像的来源，并在鼠标移开时将其更改回来。它工作得很好但是当我尝试将此效果应用于具有相同类的多个图像时，错误的图像被替换。所以我为每个鼠标悬停图像编写了不同的功能。它变得太多代码了。有人可以给我一些想法，我可以如何压缩这些代码，使所有具有某个类的图像切换到适当的悬停图像并返回。

$(document).ready(function(){
var passiveBio = $("#index_container img.bio").attr("src");
var hoverBio = passiveBio.replace(".jpg", "_hover.jpg");
$("#index_container img.bio")
    .mouseover(function() { 
        $(this).attr("src", hoverBio);
        })
    .mouseout(function() {
        $(this).attr("src", passiveBio);
        });
var passiveSamples = $("#index_container img.samples").attr("src");
var hoverSamples = passiveSamples.replace(".jpg", "_hover.jpg");
$("#index_container img.samples")
    .mouseover(function() { 
        $(this).attr("src", hoverSamples);
        })
    .mouseout(function() {
        $(this).attr("src", passiveSamples);
        });
var passiveServices = $("#index_container img.services").attr("src");
var hoverServices = passiveServices.replace(".jpg", "_hover.jpg");
$("#index_container img.services")
    .mouseover(function() { 
        $(this).attr("src", hoverServices);
        })
    .mouseout(function() {
        $(this).attr("src", passiveServices);
    });});

这是带图像的div。

<div id="index_container">
    <a href="samples.html"><img class="index_box samples" src="images/samples.jpg"/></a>
    <a href="services.html"><img class="index_box services" src="images/services.jpg"/></a>
    <a href="about.html"><img class="index_box bio" src="images/bio.jpg"/></a>
    <img class="index_box" src="images/grey.png"/>
    <img class="index_box" src="images/light_blue.png"/>
    <img class="index_box" src="images/dark_blue.png"/>
    <img class="index_box" src="images/grey.png"/>
    <img class="index_box" src="images/light_blue.png"/>
    <img class="index_box" src="images/dark_blue.png"/>
    <p class="clear"></p>
</div>

我尝试将所有图像都设为同一个类，只是将.jpg更改为_hover.jpg，但它们没有更改为正确的图像。它们都变成了同一个悬停图像而不是自己的图像。

提前感谢您的帮助！

Answer 1

定位所有图像，或者给它们一个公共类并将其用作选择器，然后立即在函数内部进行替换：

$('#index_container img').on({
    mouseenter: function() {
        this.src = this.src.replace('.jpg', '_hover.jpg');
    },
    mouseleave: function() {
        this.src = this.src.replace('_hover.jpg', '.jpg');
    }
});

结合jQuery函数使其更简单

1 个答案: