使用复选框“组”根据数据属性/数组过滤表数据

Question

我有一个现有的网站，里面有一张床垫。我以前有一个复选框列表，允许访问者根据他们通过复选框选择的大小过滤（显示/隐藏）表格中的某些行。我将每行的大小传递到数据属性中，然后根据复选框数组与大小数组的匹配进行过滤。 （目前每行只有一种尺寸，但客户表示他们可能需要为任何给定的床垫/行添加多种尺寸，因此我们需要能够以逗号分隔列表）。

最近客户要求我还添加“品牌”复选框以根据品牌进行过滤（显示/隐藏），我已完成此操作并将品牌添加到数据属性中。我遇到的问题是，当用户在最近选择的任何内容上检查 jQuery 过滤器的大小和品牌组合时，而不是查看数据属性中的所有复选框和整个数组以确保它只显示过滤器的组合.

这是我当前的 jQuery：

$('ul.filters input[type="checkbox"]').on('change', function() {
    $('.dataTable tbody tr').hide();
    var results = true;
    var noneAreChecked = true;

    var checkboxArray = $('.filters input[type="checkbox"]:checked').map( function () {
        return $(this).attr('id');
    }).get().join();

    checkboxArray = checkboxArray.split(',');
    //console.log('Checkbox Array: ' + checkboxArray);

    $('ul.filters input[type="checkbox"]').each(function() {
        if ( $(this).is(':checked') ) {

            $('.dataTable tbody tr').each(function() {
                var $this = $(this);
                if ($this.data('context')) {

                    var contextArray = $this.data('context');
                    contextArray = contextArray.split(', ');
                    //console.log('Sizes Array: ' + filtersArray);

                    for (var i = 0; contextArray.length > i; i++) {
                        for (var j = 0; checkboxArray.length > j; j++) {
                            if (contextArray[i] === checkboxArray[j]) {
                                //console.log(contextArray[i] + ' matched!');
                                $(this).show();
                            }

                        }

                    }
                }
            });

            noneAreChecked = false;
        }
    });

    if (noneAreChecked) {
        $('.dataTable tbody tr').show();
        $('tr.no-results').remove();
    }

    var bgFlag = true;

    $('.dataTable tbody tr:visible').each(function() {
        $(this).removeClass('even odd');
        if (bgFlag) {
            $(this).addClass('odd');
        } else {
            $(this).addClass('even');
        }
        bgFlag = !bgFlag;
    });
});

查看 JS Bin： http://jsbin.com/xusequ/4/

感谢您在这里提供的任何帮助！

Answer 1

看起来你最好还是做一些不同的事情。

我做了something like this:

$('.dataTable tbody tr').each(function() {
        var $this = $(this);
        var context = $this.data('context');
        $this.hide();
        if (context) {
            for (var i = 0; brandArray.length > i; i++) {
                if ( context.indexOf(brandArray[i]) === -1) {
                    return;
                }
            }
            for (var i = 0; sizeArray.length > i; i++) {
                if ( context.indexOf(sizeArray[i]) === -1) {
                    return;
                }
            }
            $this.show();
        }
    });