0

ランダムな数のギャラリーアイテムを含めることができるフォトギャラリーを作成しています。コードは次のようになります。

<div class="gallery-item">
   <div id="gal-img1"><a href=""><img src="15.jpg"></a></div>
   <div class="gal-desc" id="gal-desc1"><h5>Title</h5></div>
</div> 
.........

<div class="gallery-item">
   <div id="gal-imgn"><a href=""><img src="15.jpg"></a></div>
   <div class="gal-desc" id="gal-descn"><h5>Title</h5></div>
</div>

クラス「gal-desc」の「display」は「none」に設定されており、gal-img（1）ではgal-img（n）マウスオーバーに対応するgal-descの「display」を「block」に設定したい（1）からgal-desc（n）へ。

次のコードを1から100まで手動で挿入できますが、40個のギャラリーアイテムを取得すると、60個のマウスオーバーが使用できなくなります。110個のギャラリーアイテムがある場合、10個のアイテムでは目的の効果が得られません。

$("#gal-img1").mouseover(function(){  
    $("#gal-desc1").css('display','block'); 
});

$（ "div [id ^ = gal-img]"）。lengthで取得できるギャラリーアイテムの最大数ですが、これ以降はスタックします。

みんな、私が行かなければならない方向のアイデアを教えてくれませんか。

ありがとうございました。

4

4 に答える 4

1

私は質問を理解しているかどうかわかりません、多分あなたはいくつかのcssを探していますか？何かのようなもの：

.gallery-item > div:first-child:hover{display:block;}
于 2012-12-05T19:54:31.567 に答える
1

正しい数の要素を取得するために使用しているのと同じセレクターを使用してすべての要素をターゲットにできます。次に、関数内でコンテキストを使用し.gal-descて、ホバーされた要素の親内の要素のみをターゲットにし.gallery-itemます。

$("div[id^=gal-img]").on('mouseenter', function() {
    $(this).closest('.gallery-item').find('.gal-desc').show();
});

または、mouseenter/leaveの表示を切り替えます

$("div[id^=gal-img]").on('mouseenter mouseleave', function(e) {
    $(this).closest('.gallery-item').find('.gal-desc').toggle(e.type=='mouseenter');
});
于 2012-12-05T19:54:50.287 に答える
1

$.onを使用してjQueryで使用できるイベント委任を使用します。すべての.gallery-itemsをコンテナーにラップして、以下の.galleryで行ったように機能させます。これにより、無限の数の.gallery-itemが可能になり、非常にパフォーマンスが向上します。

<div class="gallery">
    <div class="gallery-item">
        <div id="gal-imgn"><a href=""><img src="15.jpg"></a></div>
        <div class="gal-desc" id="gal-descn"><h5>Title</h5></div>
    </div> 
    .....
</div>
.....
$('.gallery').on('mouseenter mouseleave', '.gallery-item', function (e) {
    if (e.type === 'mouseenter') {
        $(this).find('.gal-desc').show();
    }
    else {
        $(this).find('.gal-desc').hide();
    }
});
于 2012-12-05T19:58:33.650 に答える
1

変化する

<div id="gal-imgn">

に

<div class="gal-img">

次に、これを行います。

$(".gal-img").mouseover(function(){  
    $(this).next(".gal-desc").show(); 
});

さらに、次のようにマウスアウトを追加できます。

$(".gal-img").mouseover(function(){  
    $(this).next(".gal-desc").show(); 
}).mouseout(function(){
    $(this).next(".gal-desc").hide();
};

これがこの（非効率的な）コードのjsfiddleです。 http://jsfiddle.net/d27Nn/1/

于 2012-12-05T20:02:11.317 に答える