jQuery篩選類別並突出顯示它是兒童

Question

我需要自定義一個腳本，我已經將頁面上的項目篩選到類別中。 這幾乎是我想要的，但並不完全！ 這裏是頁：http://inspiredworx.com/dev/octavius/projects.html

我想要什麼： 當你點擊頁面底部的類別鏈接之一，小「廣場」是這一類的孩子，會改變顏色較暗藍色。

發生了什麼： 當我點擊一個類別時，所有的方塊都會變成深藍色。

我知道這是因爲'隱藏'的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; 
}); 

}）;

在此先感謝

Answer 1

如果我正確理解你，在過濾器上選擇您想要淡出不匹配的篩選項目，並在匹配過濾項褪色。

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); 
});