CODEWITHSUNDEEP
javascriptjquery
Smek
Smek

Reputation: 1208

jQuery filter on color and category

I need jQuery to filter my list on color and category. I made two filters but when I filter on a color and then on a category the other colors I filtered out apear again. Here's my html and jQuery code:

<!DOCTYPE html>
<html>
<head>
<style>
#scrollable{
    height:920px;
    width:920px;
    overflow: auto;
}
#scrollable li{
    list-style-type:none;
}
.product{
    float:left;
}
.red{
    background:#FF0000;
}
.green{
    background:#00FF00;
}
.blue{
    background:#0000FF;
}
.a{
    width:300px;
    height:300px;
}
.o{
    width:300px;
    height:300px;
}
.k{
    width:300px;
    height:300px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<select id="cat">
<option value="all">All</option>
<option value="a">A</option>
<option value="k">K</option>
<option value="o">O</option>
</select>
<label>Red<label><input type="checkbox" checked=checked name="red" id="red" /><br />
<label>Green<label><input type="checkbox" checked=checked name="green" id="green" /><br />
<label>Bleu<label><input type="checkbox" checked=checked name="blue" id="blue" /><br />
</form>
<ul id="scrollable">
    <li><div class="product a red">R a</div><div class="product o blue">B o</div><div class="product k green">G k</div></li>
    <li><div class="product o green">G o</div><div class="product k red">R k</div><div class="product o blue">B o</div></li>
    <li><div class="product k blue" >R k</div><div class="product a green">G a</div><div class="product a red">R a</div></li>
</ul>
<script>
function catFilter(){
    if ($(this).val() == "a") {
        $(".a").show();
        $(".o").hide();
        $(".k").hide();
    }
    if ($(this).val() == "o") {
        $(".a").hide();
        $(".o").show();
        $(".k").hide();
    }
    if ($(this).val() == "k") {
        $(".a").hide();
        $(".o").hide();
        $(".k").show();
    }
    if ($(this).val() == "all") {
        $(".a").show();
        $(".o").show();
        $(".k").show();
    }
}
function filter() {
    if ($('#red').attr('checked')) {
        $(".red").show();
    } else {
        $(".red").hide();
    }
    if ($('#green').attr('checked')) {
        $(".green").show();
    } else {
        $(".green").hide();
    }
    if ($('#blue').attr('checked')) {
        $(".blue").show();
    } else {
        $(".blue").hide();
    }
}

$(":checkbox").click(filter);
$("#cat").change(catFilter);
</script>
</body>
</html>

Any ideas how to resolve this?

Thanks

Upvotes: 0

Views: 1257

Answers (2)

The Alpha
The Alpha

Reputation: 146201

You may want this

function catFilter(){
    var items=$('input:not(":checked")');
    var unchecked=[];
    items.each(function(i){
       unchecked[i]='.'+$(this).prop('id');
    });
    unchecked=unchecked.toString();

    if ($(this).val() == "a") {
        $(".a").not(unchecked).show();
        $(".o").hide();
        $(".k").hide();
    }
    if ($(this).val() == "o") {
        $(".a").hide();
        $(".o").not(unchecked).show();
        $(".k").hide();
    }
    if ($(this).val() == "k") {
        $(".a").hide();
        $(".o").hide();
        $(".k").not(unchecked).show();
    }
    if ($(this).val() == "all") {
        $(".a").not(unchecked).show();
        $(".o").not(unchecked).show();
        $(".k").not(unchecked).show();
    }
}

DEMO.

Upvotes: 1

Py.
Py.

Reputation: 3599

What I would do, is stroring the two filter parameters in two variables and use one function to show/hide accordingly. The filter function would then be : 

var catFil = "",
    colFil = [];
function catFilter(){
    switch($(this).val()){
        case "a":
            catFil = ".a";
            break;
        case "o":
            catFil = ".o";
            break;
        case "k":
            catFil = ".k";
            break;
        default:
            catFil = "";
            break;
    }
    applyFilter();
}
function filter() {
    colFil=[];
    if ($('#red').attr('checked')) {
        colFil.push(".red");
    }
    if ($('#green').attr('checked')) {
        colFil.push(".green");
    }
    if ($('#blue').attr('checked')) {
        colFil.push(".blue");
    }
    applyFilter();
}

function applyFilter(){
    var i;
    /*Hide every products */
    $(".product").hide();
    /* show the needed product*/
    for (i = 0;i<colFil.length;i++){
        $(catFil+colFil[i]).show();
    }
}

Upvotes: 0

Related Questions