jQuery同位素插件添加剂过滤器

时间:2012-08-03 16:51:34

标签: javascript jquery jquery-isotope

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

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

次要问题:是否有任何功能允许逐步过滤?例如,如果我可以显示2或3列的所有模板,然后将这些结果过滤为仅文本和视频模板。

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

2 个答案:

答案 0 :(得分:1)

我假设您已经应用了各种用于过滤的类,例如col2,col3,col4和text,image,video,并且正在构建一个沿着'.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/)上的文档提供了有关高级过滤的更多信息。

答案 1 :(得分:0)

您可以轻松过滤各种组合,如http://jsfiddle.net/3nY9V/

所示