Question

这个问题是这个问题的进一步发展：

jQuery simple checkbox to hide and show divs (product filtering)

极好地回答了

ManseUK的解决方案支持按单个类别进行产品过滤，特别是类型，但对于我当前的项目，我需要按两个类别排序：颜色和大小。通过修改ManseUK的解决方案，我几乎可以使用它，但是当我选择了两个滤波器时失败 - 在这个例子中，选择'青色'和'xl'应该只显示xl青色，而是显示两个青色而不仅仅是xl青色。我正在使用的代码如下：

HTML：

<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>
<!--------------------->

CSS：

.productItem{float:left;padding:5px;margin:5px;border:1px solid #eaeaea}
body{font-family:verdana}

JS：

$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('.products >div').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('.products >div[data-category=' + this.id + ']').show();
            $('.products >div[data-size=' + this.id + ']').show();
        });
    } else {
        $('.products >div').show();
    }
});

JSFIDDLE of the above code

我可以看到js正在执行一个逻辑OR，其中div显示 - 如何将其设为AND？

Answer 1

对代码进行了一些更改..

缓存变量。
您正在遍历所有复选框并将ID分配给
它。您需要单独查询大小，因为它是不同的实体..
我只循环不是大小的复选框。所有颜色
然后检查尺寸是否也检查每种颜色...

完整代码

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

<强> Check Fiddle

使用复选框对多个类别进行jQuery产品过滤

1 个答案: