javascript - jQuery/Isotope 复杂的 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

据我所知，没有办法在 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”“分发”到选择器语法中。

希望这对您有所帮助!