Question

我已经编写了一个基本的产品过滤算法，当我坚持使用一个过滤器时可以正常工作，但是当我尝试组合过滤器时出现问题。

当我取消选中复选框时，算法仅检查已选中复选框的过滤器，但不检查其他（已选中）复选框的过滤器。我建议你查看我的代码的JSFiddle，它会比我解释清楚得多。

我正在寻找一些改进过滤算法的建议

如果您选中每个复选框并取消选中所有合作伙伴，则会隐藏所有产品，但仍会检查类别复选框，以便显示某些产品。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.product').hide();
            $(function() {
                $('.filter').on('click', function() {
                    var filter = $(this).attr("filter");
                    var data = $(this).attr("data");
                    if ($(this).is(':checked')) {
                        $('.product').each(function (i, obj) {
                            if ($(obj).attr(filter) == data) {
                                $(obj).show();
                            }
                        });
                    } else if (!$(this).is(':checked')) {
                        $('.product').each(function (i, obj) {
                            if ($(obj).attr(filter) == data) {
                                $(obj).hide();
                            }
                        });
                    }
                });
            });
        });
    </script>
</head>

<body>
    <p>Category</p>
    <div>
        <input class="filter" filter="category" data="boeken" type="checkbox" />
        books
    </div>

    <div>
        <input class="filter" filter="category" data="spellen" type="checkbox" />
        games
    </div>

    <div>
        <input class="filter" filter="category" data="andere" type="checkbox" />
        other
    </div>
    <p>Partners</p>
    <div>
        <input class="filter" filter="partner" data="amazon" type="checkbox" />
        amazon
    </div>
    <div>
        <input class="filter" filter="partner" data="ebay" type="checkbox" />
        ebay
    </div>



    <div class="products">
        <div class="product" category="boeken" partner="amazon" />
            Product 1
        </div>
        <div class="product" category="spellen" partner="ebay" />
            Product 2
        </div>
        <div class="product" category="andere" partner="ebay"/>
            Product 3
        </div>
        <div class="product" category="andere" partner="amazon"/>
            Product 4
        </div>
    </div>
</body>
</html>

Answer 1

单击过滤器时隐藏所有产品。
对于each已选中的过滤器，如果产品的数据与过滤器匹配，则显示产品。请参阅 http://api.jquery.com/attribute-equals-selector/
如果有多个合作伙伴，请在逗号上split data，并使用$.each循环遍历data数组。

段

＆＃13;

$('.product').hide();

$('.filter').click(function() {
  $('.product').hide();
  $('.filter:checked').each(function() {
    var filter = $(this).attr('filter');
    var data   = $(this).attr('data').split(', ');
    $.each(data, function(index,value) {
      $('.product['+filter+'="'+value+'"]').show();
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Category</p>
<div><input class="filter" filter="category" data="boeken" type="checkbox" />books</div>
<div><input class="filter" filter="category" data="spellen" type="checkbox" />games</div>
<div><input class="filter" filter="category" data="andere" type="checkbox" />other</div>
<p>Partners</p>
<div><input class="filter" filter="partner" data="amazon" type="checkbox" />amazon</div>
<div><input class="filter" filter="partner" data="ebay" type="checkbox" />ebay</div>
<div><input class="filter" filter="partner" data="amazon, ebay" type="checkbox" />amazon and ebay</div>
<br>
<div class="products">
  <div class="product" category="boeken"  partner="amazon" />Product 1</div>
  <div class="product" category="spellen" partner="ebay" />Product 2</div>
  <div class="product" category="andere"  partner="ebay" />Product 3</div>
  <div class="product" category="andere"  partner="amazon" />Product 4</div>
</div>

＆＃13;

产品过滤算法需要改进

1 个答案:

段