結合jQuery的功能，使更簡單

Question

我有一個簡單的功能，更改鼠標懸停上的圖像的來源，並將其更改回鼠標懸停。它的效果很好，但是當我嘗試將這種效果應用於具有相同類別的多個圖像時，錯誤的圖像將被替換。所以我爲每個mouseover圖像編寫了不同的函數。它變得太多代碼。有人能給我一些想法，我可以如何壓縮這段代碼，使具有某個類的所有圖像切換到適當的懸停圖像並返回。

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