jQuery過濾器的顏色和類別

Question

我需要jQuery來過濾我的顏色和類別列表。 我做了兩個過濾器，但是當我先過濾一種顏色然后再分類時，我過濾掉的其他顏色又出現了。 這是我的html和jQuery代碼：

<!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>

任何想法如何解決這個問題？

謝謝

Answer 1

你可能想要這個

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

演示。

Answer 2

我要做的是將兩個過濾器參數存儲在兩個變量中，並使用一個函數來相應地顯示/隱藏。 過濾功能將是：

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

jQuery過濾器的顏色和類別

問題描述

2 個解決方案

解決方案1
1 已采納 2012-07-09 12:14:16

解決方案2
0 2012-07-09 11:36:25

jQuery過濾器的顏色和類別

問題描述

2 個解決方案

解決方案1 1 已采納 2012-07-09 12:14:16

解決方案2 0 2012-07-09 11:36:25

解決方案1
1 已采納 2012-07-09 12:14:16

解決方案2
0 2012-07-09 11:36:25