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

DEMO.

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 个答案: