0

マウスオーバーで画像のソースを変更し、マウスアウトで元に戻す簡単な関数があります。うまく機能しますが、同じクラスの複数の画像にこの効果を適用しようとすると、間違った画像が置き換えられます。そのため、マウスオーバー画像ごとに異なる関数を作成しました。それはあまりにも多くのコードになりつつあります。誰かが私にこのコードを凝縮して、特定のクラスのすべての画像を適切なホバー画像に切り替えて元に戻す方法を教えてもらえますか？

$(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に変更しようとしましたが、正しい画像に変更されていません。それらはすべて、独自のものではなく、同じ1つのホバー画像に変更されます。

よろしくお願いします！

4

1 に答える 1

5

すべての画像をターゲットにするか、共通のクラスを指定してそれをセレクターとして使用し、関数内でその場で置換を実行します。

$('#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-26T18:10:26.907 に答える