用“OR”而不是“AND”过滤 JS答案

【问题标题】：Filtering JS with an 'OR' and not an 'AND'用“OR”而不是“AND”过滤 JS
【发布时间】：2025-12-03 05:00:02
【问题描述】：

我的 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>

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

【问题讨论】：

看不到您的 HTML，但是如果您只删除 else hide 语句，它会起作用吗？ else $('#' + $(item).attr("id")).hide();
您的 $(filters).each( 看起来不对...您已经将 filters 定义为 jQuery 对象，那么为什么还要将它传递给 $() 呢？
@jas7457 - 你是对的，我删除了过滤器变量周围的 $()
@andi - 删除 else 它仍然隐藏。其余的项目。我添加了 JS 使用的 html 元素。
您的程序中有逻辑错误。您将它们全部打开，然后迭代它们，然后检查每个过滤器是否匹配...首先过滤器得到匹配，显示仍然为真，但下一个过滤器，没有匹配，您将显示设置为假。删除 if(show) 上的 else，如果在过滤器上得到匹配，则中断循环，您不需要再检查任何过滤器，然后迭代到下一个项目

标签： javascript jquery filtering

【解决方案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();

【讨论】：

【解决方案2】：

如果没有你的 HTML 来测试，我把它放在这里作为猜测。我在这里所做的是翻转逻辑。

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

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

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

【讨论】：