Question

我遇到的问题是我的jQuery过滤器会相互覆盖。例如，如果我想看到男装和女装，则男装匹配第1项并将其设置为显示，但随后将其设置为隐藏，因为女装不在$.inArray(filter.value, item.data("attributes")) == -1的数据属性中。有没有办法比较2个数组（一个是选择的过滤器，另一个是item.data（“attributes”））并显示具有一个或多个匹配项的不同项目。（即我想要蓝色或红色的男装和女装）

$('.filter').on('click', function() {
        filters = $('.filter:checked');
        if (filters.length == 0)
            $('.list-o-glasses').show();
        else {
            $('.list-o-glasses').hide();
            $('.list-o-glasses').each(function(index, val) {
                var item = $(this);
                var show = true;
                $(filters).each(function(i, filter) {
                    if ($.inArray(filter.value, item.data("attributes")) == -1) {
                        show = false;
                    }
                });

                if (show)
                    $('#' + $(item).attr("id")).show();
                else
                    $('#' + $(item).attr("id")).hide();
            });
        }
    });\

以下是呈现的HTML：

<div class="row shop-grid grid-view">
<div class="col-lg-4 col-md-6 list-o-glasses" id="BSG034BN" data-attributes="[&quot;men&quot;,&quot;wayfarer&quot;,&quot;metal&quot;,&quot;145&quot;,&quot;135&quot;,&quot;brown&quot;,&quot;brown&quot;]" style="display: block;">
</div>
</div>

谢谢，如果您有任何想法，请告诉我们！

Answer 1

var show = false;
$(filters).each(function(i, filter) {
  if ($.inArray(filter.value, item.data("attributes")) <> -1) {
    show = true;
    return false;  //matched a filter, break the loop
  }
});

if (show)
  $('#' + $(item).attr("id")).show();

Answer 2

如果没有您的HTML测试，我可以将此作为猜测。我在这里所做的是翻转逻辑。

首先，它显示所有行。然后它遍历每一行，获取适用的属性。对于这些属性中的每一个，它都会搜索匹配的已检查过滤器。如果至少有一个匹配，则保持行可见。否则，它会隐藏它。您可以在jQuery的网站上找到有关some at MDN，toggle和is的更多信息。

＆＃13;

$(function() {
  $('.filter').on('click', function() {
    var filters = $('.filter:checked');
    $('.list-of-glasses').show();
    $('.list-of-glasses').each(function() {
      var item = $(this);
      var attrs = item.data("attributes");
      var show = attrs.some(function(attr) {
        return filters.is('input[value="' + attr + '"]');
      });
      item.toggle(show);
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><label>Men's<input type="checkbox" checked value="mens" class="filter"></label></li>
<li><label>Women's<input type="checkbox" checked value="womens" class="filter"></label></li>
<div class="list-of-glasses" data-attributes="[&quot;mens&quot;]">Men's</div>
<div class="list-of-glasses" data-attributes="[&quot;mens&quot;,&quot;womens&quot;]">Unisex</div>
<div class="list-of-glasses" data-attributes="[&quot;womens&quot;]">Women's</div>

＆＃13;

使用“OR”过滤JS而不是“AND”

2 个答案: