javascript - jQuery 同位素插件附加过滤器

Question

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

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

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

我认为这可能超出了插件的范围，我可能必须编写自己的过滤器，找到不同的插件(至少用于过滤)或更改向用户呈现过滤的方式。

Answer 1

我假设您应用了用于过滤的各种类，例如 col2、col3、col4 和文本、图像、视频，并且当前正在沿着“.col2.image”的行构建过滤器字符串，其中获取跨两列并且是图像的每个元素。通过用逗号分隔它们，您将获得一个 OR 过滤器('.col2, .image')，它显示任何图像或跨两列的内容。

首先，您现在可以将第二部分的这些内容组合起来创建一个过滤器，例如“.col2.text、.col2.video、.col3.text、.col3.video”，但是，这可能会很快变得丑陋，特别是当您增加类别数量时。

为了简化，我修改了 Isotope 以接受过滤器数组并将它们与多个过滤器调用链接在一起，但是，听起来也可以传入更复杂的过滤对象而不是字符串(https://github.com/desandro/isotope/issues/144#issuecomment-4595552)，这样就无需修改 Isotope 的源代码。对于上面的示例，这可能类似于:

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

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

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