0

各項目のマウスオーバー イベントで、2 番目の div に読み込まれた画像が変更され、onMouseout が元のコンテンツに置き換えられるメニューがあります。

この時点で、元のコンテンツを var に保存し、メニュー項目ごとに onMouseover & onMouseOut イベントを作成しています。

Jクエリ:

 $(document).ready(function(){
    var heroSwap= $('#swapspace').html();

    $('#menu1').mouseover(function(){
        $('#swapspace').html('<img src="img/1.JPG"></img>');

    });
    $('#menu1').mouseout(function(){

        $('#swapspace').html(heroSwap);

    });
    .... ..*ETC  There are 7 More of these identical except for id*.. ....

});

質問：

  1. メニュータグからパラメータを処理できる汎用関数を作成する方法はありますか?
  2. onMouseover/onMouseout イベントによって表示/非表示される隠し div を作成するために innerHTML img タグを交換する代わりに、簡単でしょうか?

完全なサンプル: サンプル サイト

4

3 に答える 3

1

画像の src をdata-src 属性に格納することをお勧めします。各画像に複数の変数を使用する必要がないようにします。

その後、html を変更する必要はありませんsrc。属性を変更するだけでうまくいきます。

まず、代わりliに使用するように置き換えますclassid's

HTML

<ul class="nav nav-stacked nav-pills">
    <li class="menu" data-src="img/1.JPG"> <a href="#">Web Development</a> </li>
    <li class="menu" data-src="img/2.JPG"> <a href="#">Software Development</a></li>
    <li class="menu" data-src="img/3.JPG"> <a href="#">System Support</a></li>
    <li class="menu" data-src="img/4.JPG"> <a href="#">SEO</a></li>
    <li class="menu" data-src="img/5.JPG"> <a href="#">Social Media Marketing</a> </li>
    <li class="menu" data-src="img/6.JPG"> <a href="#">Project Management</a></li>
</ul>

Javascript

$(document).ready(function () {
    var $swapImg = $('img', '#swapspace'),
        defaultImage = 'default.jpg';

    $('.menu').on({
        mouseover: function () {
            $swapImg.attr('src', $(this).data('src'));
        },
        mouseout: function () {
             $swapImg.attr('src', defaultImage);
        }
    })
});

この方法では、メニュー項目ごとに個別のハンドラーを使用するのではなく、すべての に対して1 つのイベント ハンドラーのみを使用できます。li's

于 2013-06-03T20:22:58.117 に答える