结合jQuery的功能，使更简单

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

$(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，但他们并没有改变，以正确的图像。他们都改变为同一个悬停图像不是自己的。

非常感谢您的帮助！

来源

2013-03-26 Christie DeLuca Ellis

您必须命名的图像错误，改变他们到同一班级是一种方式，因为你对所有人都是完全一样的。 – Huangism 2013-03-26 18:12:10

目标的所有图像，或给他们一个共同的类，并使用它作为一个选择，而只是在函数内部替换上飞：

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

来源

2013-03-26 18:10:26 adeneo

它非常简单！我试图让它比我需要的更复杂。非常感谢！ – 2013-03-26 18:16:22

@ChristieDeLucaEllis - 不客气。如果它帮助你，请记住接受答案，当有更多问题出现时，欢迎回来，他们总是这么做。 – adeneo 2013-03-26 18:24:29

结合jQuery的功能，使更简单

回答

相关问题