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

问题描述

我正在尝试构建一个复选框过滤器，该过滤器将基于那些元素上的多个data- *属性来显示/隐藏这些元素.我做了几次尝试，但仍未完全符合我想要的过滤条件.

I'm trying to build a checkbox filter that will show/hide elements based on multiple data-* attributes on those elements. I've made a couple attempts which aren't quite working out to the filtering I want.

我在以下地方打了个小玩意儿

I've made a bare bones fiddle at:

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

我知道这段代码是不正确的，这只是我从小提琴从头开始撞到同一堵墙的地方.

I know this code is not correct, it's just where I hit the same wall starting over from scratch in a fiddle.

我要进行的过滤是一个和"过滤器，您应用的过滤器越多，最终得到的结果就越少.

The filtering I'm after is an "and" filter where the more filters you apply, the less results you typically end up with.

例如，在小提琴中，如果选择黄金"，则只会得到黄金结果.如果添加银"过滤器，则可获得金和银，到目前为止，效果还不错.因此，我只希望使用一个data- *属性.

For example, in the fiddle, if you select "gold" you just get gold results. If you add the "silver" filter you get gold and silver, which is good so far. So I'm and'ing fine within one data-* attribute.

问题是，如果添加另一个data- *过滤器(例如，选择了金和银)，则添加网络A"过滤器.在这种情况下，我希望将结果过滤为仅金和仅银元素，以及仅金/银元素，它们还具有网络A数据属性.

The problem is if you add another data-* filter, for example, with gold and silver selected, add the "network A" filter. In this case, I want the results to be filtered down to only gold and only silver elements with only gold/silver elements that also have the network A data attribute.

构建这种过滤的最佳方法是什么，那么当应用价格过滤器时，它甚至可以进一步过滤结果?

What's the best way to build this sort of filtering so when the price filter is applied it filters results down even more?

推荐答案

我相信您需要在应用后续条件之前，为复选框添加一个额外的属性，以便为$ productItem显式定义顶级过滤器.我还更改了您的用户界面.对最终用户而言，隐藏筛选出的卡片似乎是惩罚性的用户体验，因此，将卡片变灰(具有CSS不透明样式)似乎更好，但也许就是我...

I believe you need to add an extra attribute to your checkboxes to explicitly define top-level filters for your $productItem, before you apply subsequent criteria. I also changed your UI. Hiding the filtered cards seems like punitive UX to your end-users, so graying out cards (with a CSS opacity style) seems to flow better, but maybe that's just me...

<input type="checkbox" data-type="level" value="platinum" /> ...
<input type="checkbox" data-type="price" value="0-2" /> ...
<input type="checkbox" data-type="network" value="networkA" /> ...

....

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

    if ($checked.length > 0) {
        $productItem.css('opacity',0.25);

        $checked.each(function() {
           dataType = $(this).attr('data-type');
           if (!filters[dataType]) filters[dataType] = [];  
           filters[dataType].push(this.value);
        });

        for(var filterType in filters) { 
            for (i in filters[filterType]) {
                productFilter += '[data-'+filterType+'="'+filters[filterType][i]+'"],';
            }
            productFilter = productFilter.replace(/,$/,'');
        }
        $productItem
            .filter(productFilter)
            .map(function() {
                $(this).css('opacity',1);
            });
    } else {
        $productItem.css('opacity',1);
    }
});

请在此处查看小提琴: https://jsfiddle.net/7ez8o1ra/35/

Please see a fiddle here: https://jsfiddle.net/7ez8o1ra/35/

这篇关于构建复选框过滤器以基于多个data- *属性显示/隐藏元素的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！