javascript - 构建复选框过滤器以显示/隐藏基于多个 data-* 属性的元素的最佳方法

Question

我正在尝试构建一个复选框过滤器，该过滤器将根据这些元素的多个 data-* 属性显示/隐藏元素。我已经进行了几次尝试，但对我想要的过滤效果不太满意。

我在以下位置做了一个简单的 fiddle :

http://jsfiddle.net/7ez8o1ra/

$('input[type="checkbox"]').click(function() {
    var $checked = $('input[type="checkbox"]:checked');
    var $productItem = $('.productItem');

    if ($checked.length > 0) {
        $productItem.hide();

        $checked.each(function() {
            $('.productItem[data-level=' + this.value + ']').show();
            $('.productItem[data-price=' + this.value + ']').show();
            $('.productItem[data-network=' + this.value + ']').show();
        });
    } else {
        $productItem.show();
    }
});

我知道这段代码不正确，这正是我在 fiddle 中从头开始重新开始的地方。

我所追求的过滤是一个“和”过滤器，您应用的过滤器越多，通常最终得到的结果就越少。

例如，在 fiddle 中，如果您选择“gold”，您只会得到黄金结果。如果你添加“银”过滤器，你会得到金和银，到目前为止还不错。所以我在一个 data-* 属性中很好。

问题是，如果您添加另一个 data-* 过滤器，例如，选择了黄金和白银，请添加“网络 A”过滤器。在这种情况下，我希望将结果过滤为仅金元素和仅银元素，其中仅金/银元素也具有network 一个数据属性。

构建这种过滤的最佳方式是什么，以便在应用价格过滤器时过滤更多结果？

Answer 1

这是你想要做的事情的基本外壳

$('input[type="checkbox"]').click(function() {
    var $checked = $('input[type="checkbox"]:checked');
    var $items = $('.productItem');
    var filters = {};

    if ($checked.length) {
        $('.productItem').hide();

        $checked.each(function() {
           filters[$(this).data('filter-type')] = $(this).val();
        });

        $items.each(function(i) {
            for (var key in filters) {
                if ($(this).data(key) == filters[key]) {
                    $(this).show();
                }
            }
        });
    } else {
        $('.productItem').show();
    }
});

让我看看能否用简单的方式解释一下。您要完成的基本上是将过滤器映射到产品列表。对于每个过滤器，仅显示与过滤器匹配的产品。为此，我将筛选器存储为键/值对。过滤器的关键是过滤器类型(级别、价格或网络)，为了存储过滤器类型，我向每个复选框添加了数据属性 data-filter-type。因此，对于过滤器类型为级别的复选框，该属性将为 data-filter-type="level"。结合您现有的 value 属性，过滤器可以在 JavaScript 中巧妙地表示为键/值对:

data-filter-type: value

因此，当用户选择过滤器“白金”和“网络 A”时，过滤器关联数组将如下所示:

{
    level: platinum,
    network: networkA
}

现在可以在过滤器数组中运行一个基本循环，并定位包含这些过滤器中的任何一个的所有项目。由于您的问题不够明确，我假设您想要 或 关系，这意味着只有一个过滤器需要应用于该项目。如果您需要将所有选定的过滤器应用于每个项目，则需要相应地修改代码。

此代码的另一个问题是将过滤器添加到过滤器数组时:

filters[$(this).data('filter-type')] = $(this).val();

这只有在每个过滤器都是唯一的情况下才有效，也就是说，每个过滤器中只有一个被选中。例如，如果选中了两个 level 过滤器，则只有第二个会应用，因为 key 将被覆盖。您将需要修改该部分以将两个值存储在同一键下。每个键的基本值数组就可以完成这项工作。

正如我所说，这是一个最小的例子。肯定会有更多情况需要修复，但我概述的一般步骤对您来说是一个很好的起点。祝你好运!

差点忘了 fiddle 链接! http://jsfiddle.net/7ez8o1ra/3/