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

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

如果您访问下面的jsfiddle ，并从第一个filter集中选择“红色”，然后从第二个filter集中选择“大”，它应该显示“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']")它会将数据类别与“红色”字匹配

如果选择$("[data-category~='red large']") jQuery将逐渐尝试将“red large”字符串与data-category属性匹配，因为您的数据类别没有由空格分隔的此类字符串，filter将失败。

要实现您所需的function，您需要组合多个属性选择器，有关更多信息，请阅读此http://api.jquery.com/multiple-attribute-selector/

我根据这个概念更新你的小提琴http://jsfiddle.net/nJUb3/1/我想这就是你要找的:)