Filtering divs based on classes, using jQuery

Question

Looking for some help on how to write a function to filter out certain divs with certain classes.

Essentially I have thrown together a quick e-commerce example . There are lists of different filters, with values. There are then products. Each product div has a number of classes applied to it, eg "green" or "adult" or "wool" - these are the filterable parameters.

Not being savvy at all with JS I'm trying to write something, but looking for some advice. Here is basically what I'm after:

1. Starts with displaying all
2. If user selects GREEN, all items that do not have GREEN attributed are display:none 'd (with a fade transition
3. Rep #2 for any attribute checked

Notes: multiple attributes can be checked, when items are unchecked, everything needs to reappear.

Any help? I guess it's basically linking up the value of each checkbox to the class.

Not sure if there is a better way codewise to do this... data attributes maybe?

Working example of the code here (obviously no JS)

Answer 1

Updated your fiddle and added some jQuery to hide the divs where the classes don't match the selected checkboxes.

Demo: fiddle

JS is a bit verbose, you can refactor it further if you like:

$(document).ready(function() {
    var allSelectedClasses;
    allSelectedClasses = '';
    $('input[type="checkbox"]').click(function(){
        //ensure the correct classes are added to the running list
        if(this.checked){
            allSelectedClasses += '.' + $(this).val();
        }else{
            allSelectedClasses = allSelectedClasses.replace($(this).val(), '');
        }        
        //format the list of classes
        allSelectedClasses = allSelectedClasses.replace(' ', '');
        allSelectedClasses = allSelectedClasses.replace('..', '.');
        var selectedClasses;
        var allSelected;
        allSelected = '';

        //format these for the jquery selector
        selectedClasses = allSelectedClasses.split(".");
        for(var i=0;i < selectedClasses.length;i++){
            var item = selectedClasses[i];
            if(item.length > 0){
                if(allSelected.length == 0){
                    allSelected += '.' + item;
                }else{
                    allSelected += ', .' + item;
                }
            }
        }
        //show all divs by default
        $("div.prodGrid > div").show();
        //hide the necessary ones, include the 2 top level divs to prevent them hiding as well
        if(allSelected.length > 0){
            $("div.prodGrid > div:not(" + allSelected + ")").hide();
        }
    });
});

Answer 2

I added a new class to your Colors ul. Hope that's okay.

Here's a crude version of a filtering function, it only takes colors into account so you have to modify it yourself to take everything into account but the basic outline is there.

It can be refactored massively! :)

Since you're using jQuery:

$('ul.colorFilter li input[type="checkbox"]').click(function(){
    var checkedBoxes = $('ul.colorFilter li input[type="checkbox"]:checked');
    var listOfClasses = [];
    checkedBoxes.each(function(index, el){
        listOfClasses.push(el.value);
    });
    if(listOfClasses.length >= 1){
        $('div.prodGrid').children('div').hide();

        for(var i = 0; i < listOfClasses.length; i++){
            $('div.prodGrid > div.'+listOfClasses[i]).show();
        }
    } else {
        $('div.prodGrid > div').show();
    }
});

I made a fiddle as well:

http://jsfiddle.net/Z9ZVk/4/