jQuery/同位素复合物 AND/OR 过滤

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 or 2 or 3) AND (B1 or 2 or 3 or 4) AND C1

AFAIK 无法在 CSS 选择器中执行“OR”，例如：

.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、OR 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 语法中。

希望这会有所帮助！