1

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

用于隐藏和显示 div（产品过滤）的 jQuery 简单复选框， ManseUK 给出了出色的回答

ManseUK 的解决方案支持按单个类别（特别是流派）进行产品过滤，但对于我当前的项目，我需要按 2 个类别进行排序：颜色和大小。通过修改 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

我可以看到 js 正在对要显示的 div 执行逻辑 OR - 我怎样才能使它成为 AND？

4

1 回答 1

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

检查小提琴

于 2012-11-08T16:53:56.947 回答