Question

我有三组复选框，允许我根据数据属性过滤多个div。他们自己工作得很好，但是当它们一起使用时，一切都变得有点'错误'。

如果您访问下面的jsfiddle，并从第一个过滤器集中选择“红色”，然后从第二个过滤器集中选择“大”，它应该显示“Stench Blossom”，但它不显示，它没有显示。似乎除非过滤的术语在数据属性中一起使用，否则它不起作用。

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

以下是我正在使用的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();
                }
            });

请参阅我设置的jsfiddle，以证明我遇到的问题 - http://jsfiddle.net/nJUb3/

Answer 1

问题本身在于您正在使用的jQuery选择器的概念。 [attribute~="value"]字面上匹配您放入其中的字符串。

例如，

如果您选择$("[data-category~='red']")，则会将数据类别与＆＃34; red＆＃34;匹配。字

如果你选择$("[data-category~='red large']") jQuery将逐字尝试匹配＆＃34; red large＆＃34;字符串到data-category属性，因为您的数据类别没有由空格分隔的此类字符串，过滤器将失败。

要实现您正在寻找的内容，您需要组合多个属性选择器，有关详细信息，请阅读此http://api.jquery.com/multiple-attribute-selector/

我根据这个概念更新了你的小提琴http://jsfiddle.net/nJUb3/1/我认为这是你正在寻找的东西：）

具有多个数据属性的Jquery复选框过滤

1 个答案: