Question

从我发布的previous question开始;我有三组复选框，允许我根据数据属性过滤多个div。这很好用，但我需要稍微修改一下。

如果您访问下面的jsfiddle，请选择“地球”。来自可用的行星＆＃39;过滤器组，然后是红色＆＃39;和黄色＆＃39;从第一个过滤器组，然后＆＃39;小＆＃39;从第二个滤镜组中，我希望它能同时显示＆＃39; Daisy＆＃39;和＆＃39; Rose＆＃39;，但它没有显示任何内容。

基本上，如果选择了第一个或第二个过滤器集中的任何输入，它应显示所有相关项，但如果选择了第三个过滤器集中的任何输入，则它应仅显示此过滤后的项目组。

请问如何修复/修改此问题？（我希望这是有道理的。）

以下是我使用的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 here

具有多个数据属性的Jquery复选框过滤第2部分

1 个答案: