Question

我有和具有许多参数的元素的同位素实例，例如让我们说：

<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元素时，它是一个简单的过滤器：

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

但是，我需要更复杂的过滤器，如（A1或2或3）和（B1或2或3或4）和C1

AFAIK无法做到＆＃34; OR＆＃34;在CSS选择器中，如：

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

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

Answer 1

Isotope使用jQuery选择引擎，使用CSS3选择语法。

我相信这就是你要找的东西：

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

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

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

.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]' });

我所做的只是将“OR”“分发”到Selector语法中。

希望这有帮助！

jQuery / Isotope复杂的AND / OR过滤

1 个答案: