2012-02-20 4 views
0

私はスクリプトをカスタマイズする必要があります。 私はそれがほしいと思っているがほとんどではない!ここ ページは次のとおりです。私が欲しいものhttp://inspiredworx.com/dev/octavius/projects.htmljQueryフィルタカテゴリとその子供を強調する

: ページの下部にあるカテゴリリンクの1つ、そのカテゴリの子である「少し四角」をクリックすると、暗いに色が変わります青。

何が起こっているのですか: カテゴリをクリックすると、すべての四角形が濃い青色に変わります。

「hidden」のcssクラスが、親要素の子(カテゴリリンク)だけでなく、クリックしたすべての四角に適用されているため、これが起こっていると私は理解しています。

誰かがここに私のスニペットで私を助けてくださいでした:

$(document).ready(function() { 
$('ul#filter a').click(function() { 
    $(this).css('outline','none'); 
    $('ul#filter .current').removeClass('current'); 
    $(this).parent().addClass('current'); 

    var filterVal = $(this).text().toLowerCase().replace(' ','-'); 

    if(filterVal == 'all') { 
     $('#portfolio .item .link.hidden').fadeIn('slow').removeClass('hidden'); 
    } else { 

     $('#portfolio .item .link a').each(function() { 
      if(!$(this).hasClass(filterVal)) { 
       $(this).fadeIn('slow').addClass('hidden'); 
      } else { 
       $(this).fadeIn('slow').removeClass('hidden'); 
      } 
     }); 
    } 

    return false; 
}); 

});事前

答えて

0

おかげで私はあなたがフィルタに一致する項目にフィルタやフェードと一致しないアイテムをフェードアウトしたいフィルタ選択の上、正しくあなたを理解していた場合。

function applyFilter(e){ 
    var target = $(e.target).closest('a'); 
    target 
     .css('outline', 'none') 
     .parent() 
      .addClass('current') 
      .siblings('.current') 
       .removeClass('current') 
    ; 

    var filterVal = $(this).text().toLowerCase().replace(' ','-'); 
    if(filterVal == 'all') { 
     $('#portfolio .item .link.hidden').fadeIn('slow', 
      function(){ 
       $('#portfolio .item .link.hidden').removeClass('hidden'); 
      } 
     ); 
    } 
    else { 
     $('#portfolio .item .link a').each(function() { 
      if(!$(this).hasClass(filterVal)) { 
       $(this).fadeOut('slow', function(){$(this).addClass('hidden');}); 
      } else { 
       $(this).fadeIn('slow', function(){$(this).removeClass('hidden');}); 
      } 
     }); 
    } 
} 

$(document).ready(function() { 
    $('ul#filter a').click(applyFilter); 
}); 
関連する問題