2

小さな問題がありますが、少し困惑しています。

次のコードを使用して、Web ページでロールオーバーを実行しています

$("#mylink1 img").hover(
 function()
 {
  this.src = this.src.replace("_off","_on");
 },
 function()
 {
  this.src = this.src.replace("_on","_off");
 }
);

これは個々の画像にはうまく機能しますが、そのうちの 1 つをロールオーバーして、もう 1 つの画像も変更したいと考えています。 

<a id="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_manage_off.gif" /></a>

<a id="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_nav2_off.gif" /></a>

どんな助けでも大歓迎です！ありがとうございました！

4

2 に答える 2

2

ID は一意であるため、ID を使用しないでください。クラスを使用してください。

<a class="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_manage_off.gif"  /></a>

<a class="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_nav2_off.gif" /></a>

それから：

$(".mylink1 img").hover(
于 2010-05-28T07:03:26.633 に答える
1

id を文字列 @corroded に変更することをお勧めします。ID はページ内で一意である必要があります。

単一の画像にカーソルを合わせたときに複数の画像を変更するには、ホバーオーバーおよびホバーアウト機能を変更する必要があります。src現在、彼らは現在ホバーしている画像の属性のみを変更しています。代わりに、両方の関数内で、各画像をループしてsrc属性を変更する必要があります。何かのようなもの：

$("#mylink1 img").hover(
    function() {
        $(".mylink1 img").each(function() {
            this.src = this.src.replace("_off","_on");
        });
    },
    function() {
        $(".mylink1 img").each(function() {
            this.src = this.src.replace("_on","_off");
        });
    }
);

いくつかのカリー化で重複を避けることができます:

(function() {
    var images = $(".mylink1 img");

    function imageSwapper(imgs, from, to) {
        return function() {
            imgs.each(function() {
                this.src = this.src.replace(from, to);
            });
        };
    }

    $(images).hover(
        imageSwapper(images, "_off", "_on"),
        imageSwapper(images, "_on", "_off")
    );
})();​
于 2010-05-28T07:26:54.417 に答える