jQuery复选框具有多个数据属性的过滤 [英] Jquery checkbox filtering with mutiple data attributes

问题描述

我有三组复选框，这些复选框使我可以基于数据属性过滤多个div.靠它们自己可以很好地工作，但是当一起使用时，它们都变得有点笨拙".

I have three sets of checkboxes which allow me to filter a number of divs based on data attributes. On their own they work fine, but when used together it all becomes a bit 'buggy'.

如果您访问下面的 jsfiddle ，然后从第一个过滤器集中选择红色"，然后选择大"在第二个过滤器集中，它应显示恶臭开花"，但不显示，则不显示任何内容.除非已过滤的术语一起出现在data属性中，否则它将无法正常工作.

If you visit the jsfiddle below, and select 'red' from the first filter set, then 'large' from the second filter set, it should display 'Stench Blossom', but it doesn't, it displays nothing. It seems that unless the filtered terms are together in the data attribute, it doesn't work.

请问该如何解决这个问题? (我希望这是有道理的.)

How would I go about fixing this issue please? (I hope this makes sense).

下面是我正在使用的jquery:

Below is the jquery I'm using:

            $('.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 /

Please see the jsfiddle I have setup to demonstrate the issue I'm having - http://jsfiddle.net/nJUb3/

推荐答案

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

The problem itself lies in the concept of the jQuery selector you're using. The [attribute~="value"] matches literally the string you put into it.

例如

如果选择$("[data-category~='red']")，它将使数据类别与红色"字匹配

If you select $("[data-category~='red']") it'll match the data categories with the "red" word

如果您选择$("[data-category~='red large']")，则jQuery会从字面上尝试将红色大"字符串匹配到data-category属性中，因为您的数据类别中没有这样的字符串，因此，过滤器将失败.

If you select $("[data-category~='red large']") jQuery will literally try to match the "red large" string into the data-category attribute, since your data category has no such string delimited by white spaces, the filter will fail.

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

To achieve what you're looking for, you need to combine multiple attribute selectors, for more information read this http://api.jquery.com/multiple-attribute-selector/

我根据此概念更新了您的小提琴 http://jsfiddle.net/nJUb3/1/我认为这就是您要寻找的:)

I updated your fiddle based on this concept http://jsfiddle.net/nJUb3/1/ I think this is what you're looking for :)

这篇关于jQuery复选框具有多个数据属性的过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！