我在Jquery中有一个产品过滤代码
我现在有一个青色,品红色和黑色的类别。还有XL的类别。但我需要四个类别,有更多的选择,但我不知道如何。一个有青色,洋红色和黑色。一个尺寸为XL,M和S.尺寸为浅色或深色,一个用于打印机品牌,如HP和Epson。
到目前为止我有代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">t
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.productItem{float:left;padding:5px;margin:5px;border:1px solid #eaeaea}
body{font-family:verdana}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('input[type="checkbox"]').click(function() {
// Cache These Variables
var $checked = $('input[type="checkbox"]:checked');
var $productsDiv = $('.products > div');
var $sizeCheckBox = $('input[type="checkbox"][value="xl"]');
if ($checked.length > 0) {
$productsDiv.hide();
// If only XL Checkbox is Checked
if ($checked.length == 1 && $sizeCheckBox.is(':checked')) {
$('.products > div[data-size=' + $sizeCheckBox.attr('id') + ']').show();
}
// If Others are also Checked
else {
// All Checkboxes and Not Size Checkbox
$checked.not($sizeCheckBox).each(function() {
var dataSize = '';
if ($sizeCheckBox.is(':checked')) {
dataSize = '[data-size=' + $sizeCheckBox.attr('id') + ']';
}
$('.products >div[data-category=' + this.id + ']' + dataSize).show();
});
}
} else {
$productsDiv.show();
}
});
});//]]>
</script>
</head>
<body>
<input type="checkbox" id="cyan" value="cyan" /> Cyan<br />
<input type="checkbox" id="magenta" value="magenta" /> Magenta<br />
<input type="checkbox" id="black" value="black" /> Black<br />
<input type="checkbox" id="xl" value="xl" /> XL<br />
<!--------------------->
<div class="products">
<div class="productItem" data-price="250" data-category="cyan">
Cyan Ink
<div class="productItemPrice"><span>£250</span></div>
</div>
<div class="productItem" data-price="150" data-category="magenta">
Magenta Ink
<div class="productItemPrice"><span>£150</span></div>
</div>
<div class="productItem" data-price="250" data-category="black">
Black Ink <div class="productItemPrice"><span>£250</span></div>
</div>
<div class="productItem" data-price="241" data-category="cyan" data-size="xl">
XL Cyan Ink
<div class="productItemPrice"><span>£241</span></div>
</div>
</div>
<!--------------------->
</body>
</html>
我希望你能提供帮助。