Question

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

最近客户要求我也添加＆＃34;品牌＆＃34;根据品牌过滤（显示/隐藏）的复选框，我已经完成了这项并将品牌添加到数据属性中。我遇到的问题是当用户检查大小和品牌的组合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();
        }
    });

使用Checkbox＆＃34; groups＆＃34;基于data-attributes / array过滤表数据

1 个答案: