结合jQuery函数使其更简单

Question

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

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