Jquery多数据属性复选框过滤第2部分

Question

继我之前发布的问题;我有三组复选框，它们允许我根据数据属性过滤一些div。这工作得很好，但我需要稍微修改一下。

如果您访问下面的jsfiddle，并从"可用行星"筛选集中选择"地球"，然后从第一个筛选集中选择"红色"one_answers"黄色"，然后从第二个筛选集中选择"小"，我希望它同时显示"雏菊"one_answers"玫瑰"，但它没有，它什么也不显示。

基本上，如果选择了来自第一个或第二个过滤器集的任何输入，它应该显示所有相关项，但如果选择了来自第三个过滤器集的任何输入，它应该只显示来自该集合的过滤项。

我该如何解决/修改这个问题?(我希望这是有意义的)。

下面是我使用的jquery:

            $('.flowers-wrap,.planets-wrap').delegate('input[type=checkbox]', 'change', function() {
                var $lis = $('.flowers > div'),
                    $checked = $('input:checked');  
                if ($checked.length)
                {                           
                    var selector = '';
                    $($checked).each(function(index, element){                            
                        selector += "[data-category~='" + element.id + "']";                            
                    });                        
                    $lis.hide();                        
                    $('.flowers > div').filter(selector).show();               
                }
                else
                {
                    $lis.show();
                }
            });

请参阅我设置的jsfiddle来演示我遇到的问题- http://jsfiddle.net/nJUb3/1/

Answer 1

这是你需要的:

        $('.flowers-wrap,.planets-wrap').delegate('input[type=checkbox]', 'change', function() {
            var $lis = $('.flowers > div'),
                $checked = $('input:checked');  
            if ($checked.length)
            {                           
                var selector = '';
      $($checked).each(function(index, element){
                  if(selector === '')
                    {
                        selector += "[data-category~='" + element.id + "']";                  
                    }else
                    {
                        selector += ",[data-category~='" + element.id + "']";
                    }
                    });                        
                    $lis.hide(); 
                    alert(selector);
                    $('.flowers > div').filter(selector).show();               
                }
                else
                {
                    $lis.show();
                }
            });

你可以在这里看到DEMO