jquery отфильтрованный список выберите

Question

Я завершил это tutorial на «Создание« фильтруемого »портфолио с jQuery 'из 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

Попробуйте сохранить массив переключаемых элементов. Я не могу это проверить, но думаю, что это близко.

EDIT: Теперь проверено и работает.

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