0

色とカテゴリでリストをフィルタリングするには、jQueryが必要です。2つのフィルターを作成しましたが、ある色でフィルターをかけ、次にカテゴリーで他の色をフィルターで取り除くと、再び表示されます。これが私の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>

これを解決する方法はありますか？

ありがとう

4

2 に答える 2

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

デモ。

于 2012-07-09T12:14:16.763 に答える
0

私が行うことは、2つのフィルターパラメーターを2つの変数に格納し、それに応じて1つの関数を使用して表示/非表示にすることです。その場合、フィルター関数は次のようになります。

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();
    }
}
于 2012-07-09T11:36:25.053 に答える