2

各画像に同じ関数を書き直すことなく、既存の画像の上にマウスを置いて画像をフェードインしようとしています。

現在私は持っています：

<script type="text/javascript">

    $(document).ready(function() {

        $('.image').mouseenter(function() {  //fade in hover image
            $(this.getAttribute("name")).fadeIn(500);
        });                         
        $('.hoverimage').mouseout(function() { //fade out hover image
            $(this).fadeOut(500);
        });

    });

</script>

...
...

<!--base images-->
<img src="image1.png" class="image" name="hoverimage1">
<img src="image2.png" class="image" name="hoverimage2">
<img src="image3.png" class="image" name="hoverimage3">

<!--image to appear when hovering over-->
<img src="image1_glow.png" class="hoverimage" id="hoverimage1">
<img src="image2_glow.png" class="hoverimage" id="hoverimage2">
<img src="image3_glow.png" class="hoverimage" id="hoverimage3">

ホバー画像がベース画像の上に配置されるように CSS が既に存在すると仮定します。私のコードがしようとしていることは次のとおりです。

  • マウスが「image1.png」のdivに入ると、名前属性「hoverimage1」を取得します
  • 次に、本質的に $('#hoverimage1").fadeIn(500); を実行することにより、ID "hoverimage1" を持つ要素をフェードインします。

しかし問題は name 属性に "#" がないことです. ID を混乱させる "name="#hoverimage1" を書きたくない. 今私の関数は $('hoverimage1").fadeIn( を実行します500); これは正しい構文ではありません。

誰かがこれで私を助けることができますか? 「$(this.getAttribute())」などに「#」を追加することは可能ですか?

4

2 に答える 2

3

を先頭に追加したい場合は#、文字列を連結するだけです。

$('#' + this.name)

しかし、可能であれば、これには要素インデックスを使用します。

    $('.image').mouseenter(function() {
        $('.other_images').eq($(this).index()).stop().fadeIn(500);
    }).mouseout(function() {
        $('.other_images').eq($(this).index()).stop().fadeOut(500);
    });

そうすれば、親画像idの属性に他の画像を書く必要さえありません。name

于 2013-03-26T22:59:10.320 に答える
2

属性がhoverimage1であるため、スクリプトは文字通り要素を探してい<hoverimage1>ます。#aを先頭に連結する必要があります。$("#"+this.getAttribute("name"))

于 2013-03-26T22:59:32.740 に答える