Question

我在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>&pound;250</span></div>
    </div>
    <div class="productItem" data-price="150" data-category="magenta">
        Magenta Ink
        <div class="productItemPrice"><span>&pound;150</span></div>
    </div>
    <div class="productItem" data-price="250" data-category="black">
        Black Ink        <div class="productItemPrice"><span>&pound;250</span></div>
    </div>
    <div class="productItem" data-price="241" data-category="cyan" data-size="xl">
        XL Cyan Ink
        <div class="productItemPrice"><span>&pound;241</span></div>
    </div>
</div>
<!--------------------->

</body>


</html>

JSFIDDLE

我希望你能提供帮助。

jquery过滤多个类别的产品

0 个答案: