jQuery/同位素复杂的AND/OR过滤 [英] jQuery/Isotope complex AND/OR filtering

问题描述

我有一个同位素实例，其中的元素具有很多参数，例如:

I have and isotope instance with elements with many parameters, for example let's say:

<element data-a="1 2 3 4 5" data-b="1 2 3 4 5" data-c="1 2 3 4 5"

当我要显示A1，B2和C3的元素时，它是简单的过滤器:

When I want to display an element which is A1, B2 and C3 it's simple filter:

.isotope({ filter: '[data-a~=1][data-b~=2][data-c~=3]' });

但是，我需要更复杂的过滤器，例如(A1或2或3)AND(B1或2或3或4)AND C1

However, i need more complex filters like (A1 or 2 or 3) AND (B1 or 2 or 3 or 4) AND C1

AFAIK无法在CSS选择器中执行或"操作:

AFAIK there is no way to do "OR" in CSS selectors like:

.isotope({ filter: '[data-a~=1 OR 2 OR 3][data-b~=1 OR 2 OR 3 OR 4][data-c~=1]' });

如何应用这种复杂的过滤器?

How to apply such complex filter?

推荐答案

同位素使用具有CSS3选择语法的jQuery选择引擎.

Isotope uses the jQuery selection engine, with the CSS3 selection syntax.

我相信这就是您想要的:

I believe this is what you are looking for:

.isotope({ filter: '[data-a~=1], [data-a~=2], [data-a~=3]' });

此过滤器选择器匹配所有具有属性data-a的元素，其中包含值1、2或3

This filter selector matches all those elements having an attribute data-a containing value 1, 2, OR 3

创建更复杂的语句，可以通过结合这两种方法来完成最后一个语句，以下是未经测试的最佳猜测"

Creating the more complex statement your last statement can be done by combining the two methods, the following is an untested "best guess"

.isotope({ filter: '[data-a~=1][data-b~=1][data-c~=1], [data-a~=1][data-b~=2][data-c~=1], [data-a~=1][data-b~=3][data-c~=1], [data-a~=1][data-b~=4][data-c~=1], [data-a~=2][data-b~=1][data-c~=1], [data-a~=2][data-b~=2][data-c~=1], [data-a~=2][data-b~=3][data-c~=1], [data-a~=2][data-b~=4][data-c~=1], [data-a~=3][data-b~=1][data-c~=1], [data-a~=3][data-b~=2][data-c~=1], [data-a~=3][data-b~=3][data-c~=1], [data-a~=3][data-b~=4][data-c~=1]' });

我所做的只是将您的或"分配到Selector语法中.

All I did was "distribute" your "OR"s into the Selector syntax.

希望这会有所帮助！

这篇关于jQuery/同位素复杂的AND/OR过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！