Filterizr 多过滤实战AND/OR 逻辑组合筛选的完整教程【免费下载链接】filterizr:sparkles: Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions :sparkles:项目地址: https://gitcode.com/gh_mirrors/fi/filterizrFilterizr 多过滤功能让你能用 AND/OR 逻辑组合多个分类条件一次性筛选出最符合要求的响应式画廊内容。这篇 Filterizr 多过滤实战教程将带你从零掌握multifilterLogicalOperator配置、toggleFilter动态切换等核心技巧并用真实案例演示 AND 与 OR 两种组合筛选逻辑的完整写法。Filterizr 多过滤是什么为什么要用 AND/OR 组合筛选Filterizr 是一个基于 CSS3 过渡动画的 JavaScript 画廊筛选库它允许每个画廊条目.filtr-item通过data-category属性挂载多个分类例如一张图片可以同时属于城市和夜景两类div classfiltr-item>new Filterizr(.filtr-container, { multifilterLogicalOperator: and, // 默认是 or });实战一OR 逻辑多过滤——点击任一标签即组合显示OR 是最常用的多过滤模式。激活分类[1, 3]时只要条目属于分类 1或分类 3 就展示。该判定逻辑位于 FilterItems.ts底层调用 intersection.ts 计算两个数组的交集// 代码语义只要存在交集就通过 if (multifilterLogicalOperator or) { return !!intersection(categories, filter).length; }在 HTML 中用data-multifilter属性声明多过滤按钮即可详见 FilterControls.tsli classfltr-controls />实战二AND 逻辑多过滤——多条件同时满足才显示AND 模式适合精确搜索类场景。例如激活分类[2, 4]时条目必须同时属于分类 2和分类 4 才显示。判定逻辑同样在 FilterItems.ts底层由 allStringsOfArray1InArray2.ts 完成全包含检查// 代码语义所有激活分类都必须存在于条目分类中 return allStringsOfArray1InArray2(filter, categories);以 demo/index.html 中的图片为例data-category2, 4的宁静湖泊图片在 AND 模式下只有同时激活自然和白昼两个分类才会出现。进阶技巧toggleFilter 实现点击再取消的灵活切换除了声明式控件你还可以用 Filterizr.ts 中的toggleFilter()方法编程控制多过滤它会在激活与取消之间自动切换filterizr.toggleFilter(3); // 激活分类 3 filterizr.toggleFilter(3); // 再次点击取消分类 3其内部由 ActiveFilter.ts 维护当前激活分类数组单选切换、数组增删、以及只剩一个分类时回退为普通筛选的逻辑都已封装好开发时无需自己处理状态。常见问题排查清单多过滤没生效检查data-multifilter属性是否写对data-filter只触发单选过滤AND 模式下图片全消失确认条目data-category中确实同时包含所有激活分类想混合 AND 与 OR可结合filter([1, 2])数组参数见 Filterizr.ts按场景切换运算符总结通过本文的 Filterizr 多过滤实战你已经掌握了 AND/OR 两种组合筛选逻辑的配置与原理OR 适合宽松的多标签浏览AND 适合严格的多条件定位而toggleFilter让交互体验更加顺滑。现在就动手改造你的画廊让 Filterizr 多过滤为页面带来丝滑的筛选体验吧【免费下载链接】filterizr:sparkles: Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions :sparkles:项目地址: https://gitcode.com/gh_mirrors/fi/filterizr创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考