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

标签 javascript jquery jquery-isotope

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

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

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

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

最佳答案

我假设您应用了用于过滤的各种类,例如 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/) 上的文档提供了有关高级过滤的更多信息。

关于javascript - jQuery 同位素插件附加过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11799992/

相关文章:

javascript - 通过 jQuery 获取窗口高度

jquery - 在 Isotope Masonry jQuery 插件中显示静态 block

javascript - 与表单选择一起使用时的 jQuery 同位素过滤器问题

javascript - 如何让子 div 用边距填充父 div 的空间?

javascript - 瓦拉 : Errors in starting examples

javascript - 如何在提交 HTML 表单时强制不接收数据

javascript - 通过滚动到页面的不同部分来更改导航

javascript - 强制 javascript csv 格式字符串中的值成为文本

javascript - 如何更改 CSS 中元素旋转的速度

javascript - 使用 firebase 重定向后保留用户