مسج القائمة المرشحة حدد

Question

لقد أنجزت هذا البرنامج التعليمي على إنشاء "فلترة" محفظة مع مسج من nettuts+ و كان يريد أن tweek قليلا.

أود أن بدلا من النقر فوق شريط التنقل العلوي و كل فئة المرشحات بناء على ما تم النقر أريد أن انقر فوق أحد "تصميم" و إذا كنت فوق آخر 'سم' سوف تظهر العناصر من كل الفئات.عند النقر عليها مرة أخرى سيتم تشغيل هذا الفلتر خارج وإظهار كل ما هو المختار.

بمعنى آخر أريد أن عرض ما من أي وقت مضى لقد حدد وأنا بالنقر فوق إلغاء تحديد الفئة مرة أخرى.

أدناه هو ملف 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;
    });
});