關於顏色和類別的jQuery過濾器

我需要jQuery來過濾我的顏色和類別列表。我製作了兩個過濾器，但是當我過濾一種顏色，然後在一個類別上，其他顏色再次過濾掉了。這裏是我的html和jQuery代碼：關於顏色和類別的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>

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

感謝

來源

2012-07-09 Smek

您有什麼問題？ – muthu 2012-07-09 11:21:32

當我使用其他過濾器時，我已經過濾了apear的項目。他們不應該出現。 – Smek 2012-07-09 11:28:03

你可能想這

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.

來源

2012-07-09 12:14:16

這更好謝謝你！ – Smek 2012-07-10 19:12:10

不客氣:-) – 2012-07-10 19:23:08

我會做什麼，是stroring兩個濾波器參數中的兩個變量，並使用一個函數來顯示/隱藏相應。然後過濾功能是：

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-09 11:36:25

謝謝你最近的編輯運行良好。 – Smek 2012-07-09 12:13:15

關於顏色和類別的jQuery過濾器

回答

相關問題