jquery過濾列表選擇

Question

我已經完成了這個tutorial關於'創建一個帶有jQuery'可過濾的「Portfolio」來自nettuts +，並且想要稍微微調一下。

我想不是點擊頂部的導航欄，而是根據點擊的內容點擊每個類別的過濾器，我想點擊一個'設計'，如果點擊另一個'CMS'，他們會顯示這兩個類別的項目。再次單擊時會關閉該過濾器並顯示所選內容。

換句話說，我希望它顯示我選擇的內容，然後通過再次單擊該類別取消選擇。

下面是我使用的JS文件：

$(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') { 
      $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); 
     } else { 

      $('ul#portfolio li').each(function() { 
       if(!$(this).hasClass(filterVal)) { 
        $(this).fadeOut('normal').addClass('hidden'); 
       } else { 
        $(this).fadeIn('slow').removeClass('hidden'); 
       } 
      }); 
     } 

     return false; 
    }); 
}); 

任何幫助，在此將是巨大的。謝謝。

Answer 1

嘗試維護一組切換的元素。我無法測試這個，但我認爲它很接近。

編輯：現在經過測試和工作。

$(document).ready(function() { 
    $('ul#filter a').click(function() { 
     $(this).toggleClass('toggled_filter').parent().toggleClass('current'); // toggle a class for its state 
     $(this).css('outline','none'); 

     var filterValList = []; 
     $('.toggled_filter').each(function(){ 
      // add each text item to the list 
      filterValList.push($(this).text().toLowerCase().replace(' ','-')); 
     }); 

     if($.inArray('all', filterValList) != -1 || filterValList.length === 0) { 
      $('ul#filter li:first').addClass('current'); 
       $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); 
     } else { 
       $('ul#filter li:first').removeClass('current'); 
       $('ul#portfolio li').each(function() { 
       var classes = $(this).attr('class').split(/\s+/); 
       // go through each of the classes on each element 
       // and hide them if they aren't toggled on 
       var match_found = false; 
       for(var i in classes){ 
        if($.inArray(classes[i], filterValList) != -1) { 
        match_found = true; 
        } 
       } 
       // check and see if anything matched 
       if(!match_found){ 
        $(this).fadeOut('normal').addClass('hidden'); 
       } else { 
        $(this).fadeIn('slow').removeClass('hidden'); 
       } 

       }); 
     } 
     return false; 
    }); 
});