1

現在、ユーザーが特定のカテゴリのサムネイルを強調表示できるサムネイル ギャラリーを構築しようとしていますが、カテゴリが選択されていないか、強調表示されていないサムネイルが表示されると、ホバー時にハイライトが表示されます。

ホバー機能

$(window).load(function(){
$('.print, .campaign, .identity, .photography').each(function(){  
$(this).css('opacity', 0);
$(this).css('display', 'block');  
});  

$('.box_print, .box_campaign, .box_identity, .box_photography').hover(function(){  
$(this).children('.print, .campaign, .identity, .photography').stop().fadeTo(300, 4);  
},function(){  
$(this).children('.print, .campaign, .identity, .photography').stop().fadeTo(000, 0);  
}); 

});

カテゴリー機能

    $(document).ready(function(){

    $(".cat-all").click(function(){
    $(this).css('font-weight', 'bold')
    $(".cat-print, .cat-identity, .cat-photography, .cat-campaign").css('font-weight', 'normal')
    $(".print, .identity, .photography, .campaign").fadeTo(100, 0);
    $(this).toggleClass("active"); return false;
});

$(".cat-print").click(function(){
    $(this).css('font-weight', 'bold')
    $(".cat-all, .cat-identity, .cat-photography, .cat-campaign").css('font-weight', 'normal')      
    $(".print").fadeTo(600, 4);
    $(".identity, .photography, .campaign").fadeTo(100, 0);
    $(this).toggleClass("active"); return false;
});


$(".cat-identity").click(function(){
    $(this).css('font-weight', 'bold')
    $(".cat-all, .cat-print, .cat-photography, .cat-campaign").css('font-weight', 'normal')     
    $(".identity").fadeTo(600, 4);
    $(".print, .photography, .campaign").fadeTo(100, 0);
    $(this).toggleClass("active"); return false;
});


$(".cat-photography").click(function(){
    $(this).css('font-weight', 'bold')
    $(".cat-all, .cat-print, .cat-identity, .cat-campaign").css('font-weight', 'normal')        
    $(".photography").fadeTo(600, 4);
    $(".identity, .print, .campaign").fadeTo(100, 0);
    $(this).toggleClass("active"); return false;
});


$(".cat-campaign").click(function(){
    $(this).css('font-weight', 'bold')
    $(".cat-all, .cat-print, .cat-photography, .cat-identity").css('font-weight', 'normal')     
    $(".campaign").fadeTo(600, 4);
    $(".identity, .photography, .print").fadeTo(100, 0);
    $(this).toggleClass("active"); return false;
});

});

JS フィドル - http://jsfiddle.net/XL3G3/5/

ご覧になった場合、私が解決できない最後のことは、カテゴリ選択で強調表示されたサムネイルでのみホバー機能を無効にする方法です.

私が読み込もうとしていたことから、ホバー機能をバインドおよびバインド解除できるようにするために、イベントの名前空間に関係があるのではないかと感じていますか? しかし、誰かが私を正しい方向に向けることができれば、私はそれを感謝しています!

4

1 に答える 1

0

私があなたをよく理解していれば、あなたのための解決策があります：

ホバー機能を実行すると：

$('.box_print, .box_campaign, .box_identity, .box_photography').hover(function () {
        //when mouse hover over the wrapper div  
        //get it's children elements with class description '  
        //and show it using fadeTo  
        $(this).children('.print, .campaign, .identity, .photography').stop().fadeTo(300, 4);
    }, function () {
        //when mouse out of the wrapper div  
        //use fadeTo to hide the div  
        $(this).children('.print, .campaign, .identity, .photography').stop().fadeTo(0, 0);
    });

各サムネイル クラスを呼び出す代わりに、次のようにします。

$('.box_print, .box_campaign, .box_identity, .box_photography')

すべてのサムネイルに同じクラスを追加し、次のようにホバー機能を実行できます。

$('.box')

次に、ユーザーがカテゴリを選択する.boxと、現在のカテゴリのすべてのサムネイルからクラスが削除されます。

于 2013-02-17T14:05:14.973 に答える