jQuery 함수를 결합하여 더 간단하게 만들기

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> 

나는 모든 이미지에 동일한 클래스를 만들고 단지 _hover.jpg에 .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'); 
    } 
});