jQuery同位素插件添加过滤器

jQuery Isotope plugin additive filter

本文关键字：过滤器添加插件同位素 jQuery 更新时间：2023-09-26

我正在使用同位素过滤器对项目的模板列表进行排序。用户可以选择根据列宽（2列、3列、4列）或类型（文本、图像、视频）进行过滤。有更多的选项，但这使示例更加简单。

过滤器现在的工作方式是项目必须匹配所有的过滤器选项。我希望能够筛选与一个或多个筛选选项匹配的项目。

第二个问题：是否有允许分步筛选的功能？例如，如果我可以显示2或3列的所有模板，然后将这些结果过滤为仅文本和视频模板。

我认为这可能超出了插件的范围，我可能不得不编写自己的过滤器，找到一个不同的插件（至少用于过滤），或者改变向用户提供过滤的方式。

我假设您已经应用了各种用于过滤的类，比如col2、col3、col4以及文本、图像、视频，并且目前正在沿着".col2.image"的行构建一个过滤器字符串，它可以为您获取跨两列的每个元素，并且是一个图像。通过用逗号分隔它们，您将得到一个OR过滤器（'.col2，.image'），它显示任何图像或跨越两列的内容。

首先，您现在可以在第二部分中结合这些内容来创建一个过滤器，如".col2.text、.col2.video、.col3.text、.cl3.video"。然而，这可能会很快变得丑陋，尤其是当您增加类别数量时。

为了简化，我修改了同位素以接受一个过滤器数组，并将它们与多个过滤器调用链接在一起，然而，听起来也可以传入更复杂的过滤对象，而不是字符串(https://github.com/desandro/isotope/issues/144#issuecomment-4595552），这消除了修改同位素来源的需要。对于上面的例子，这可能看起来像：

$('.element').filter('.col2, col3').filter('.text, .video')

这比生成可能组合的字符串要简单得多。

.filter上的文档(http://api.jquery.com/filter/)提供有关高级筛选的更多信息。

您可以轻松筛选各种组合，如下所示http://jsfiddle.net/3nY9V/