使用多个数据属性进行Jquery复选框筛选

我有三组复选框，允许我根据数据属性过滤多个div。它们单独工作很好，但当一起使用时，它们都变得有点“车”

如果您访问下面的，并从第一个过滤器集中选择“红色”，然后从第二个过滤器集中选择“大型”，它应该显示“恶臭花朵”，但它不显示，它什么也不显示。看起来，除非过滤后的术语在数据属性中放在一起，否则它不起作用

请问我如何着手解决这个问题？（我希望这是有道理的）

下面是我正在使用的jquery：

            $('.flowers-wrap, .planets-wrap').delegate('input[type=checkbox]', 'change', function() {
                var $lis = $('.flowers > div'),
                    $checked = $('input:checked');  
                if ($checked.length)
                {
                    var selector = $checked.map(function ()
                    {
                        return '' + $(this).attr('id');
                    }).get().join(' ');     
                    $lis.hide();
                    $('.flowers > div').filter('[data-category~="' + selector + '"]').show();           
                    console.log(selector);    
                }
                else
                {
                    $lis.show();
                }
            });

---

请参阅我设置的JSFIDLE来演示我遇到的问题-

问题本身在于您使用的jQuery选择器的概念。

[attribute~=“value”]

与您输入的字符串完全匹配

比如说,

如果选择

$（“[data category~='red']”）

它会将数据类别与“red”字匹配

如果选择

$（“[data category~='red large']”）

jQuery将尝试将“red large”字符串匹配到data category属性中，因为您的数据类别没有以空格分隔的此类字符串，因此过滤器将失败

要实现您想要的功能，您需要组合多个属性选择器，有关更多信息，请阅读此

我根据这个概念更新了你的小提琴，我想这就是你想要的：）