对一个对象应用多个过滤器的最佳方式

Question

我在一些具有多个数据属性的元素上构建一个过滤器。即形状和颜色。

这是听众的小提琴

    $('#colour input').on('change', function(e) {
                data = ($('input[name="myRadio"]:checked', '#colour').val());
                filter(data);
                console.log(secondfilter);
                e.preventDefault();
            });
    $('#shape input').on('change', function(e) {
               from = ($('input[name="myRadio"]:checked', '#shape').val());
               filter(from);
               console.log(secondfilter);
               e.preventDefault();
            });

我需要合并侦听器，但我不确定最好的方法是什么。

我已经尝试组合选择器，即:'方红色'，但是没有'的课。红色方块"。我需要过滤一下。方形' AND '.red'。

抱歉，如果这还不够清楚!

提前感谢您的帮助/指导

Answer 1

您可以这样尝试:

$('#colour input, #shape input').on('change', function(){
    $('#container .item').hide();
    var colour = $('#colour input:checked').val() ? '.' + $('#colour input:checked').val() : '',
        shape  = $('#shape input:checked').val() ? '.' + $('#shape input:checked').val() : '';
    $('#container .item' + colour + shape).show();
});

这是更新后的演示