如何在Filterizr中基于所选过滤器采用不同的筛选组合逻辑？

很高兴能帮你搞定这个Filterizr的逻辑切换需求！Filterizr默认只支持全局统一的OR/AND筛选逻辑，但要实现针对特定过滤器组合的差异化逻辑（比如A+B用OR、B+C用AND），我们需要绕过默认的全局配置，直接用它的API手动控制筛选规则。下面是具体的实现思路和可直接复用的代码示例：

核心思路 #

Filterizr的filter()方法支持传入自定义的筛选函数，我们可以在这个函数里根据当前选中的过滤器集合，动态判断应该使用哪种逻辑来匹配项目。简单来说就是：

1. 跟踪当前选中的过滤器
2. 根据选中的组合（比如A+B、B+C）决定用OR还是AND逻辑
3. 调用自定义筛选函数完成过滤

具体实现步骤 #

1. 初始化Filterizr #

先初始化插件，但不要设置全局的filterLogic参数，因为我们要手动控制逻辑：

// 初始化Filterizr，基础配置按需调整
const filterizr = new Filterizr('.filtr-container', {
  animationDuration: 0.6,
  easing: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
  // 不设置filterLogic，后续用自定义函数控制
});

2. 跟踪选中的过滤器 #

假设你的过滤器是带data-filter属性的按钮（或复选框），我们需要监听它们的点击/切换事件，维护一个当前选中过滤器的数组：

let activeFilters = [];

// 监听过滤器按钮的点击事件（如果是复选框就监听change事件）
document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const filterTag = btn.getAttribute('data-filter');
    
    // 切换选中状态
    if (activeFilters.includes(filterTag)) {
      // 移除已选中的过滤器
      activeFilters = activeFilters.filter(tag => tag !== filterTag);
      btn.classList.remove('active');
    } else {
      // 添加新选中的过滤器
      activeFilters.push(filterTag);
      btn.classList.add('active');
    }

    // 触发自定义筛选逻辑
    applyCustomFilter();
  });
});

3. 实现自定义筛选逻辑（核心部分） #

编写applyCustomFilter函数，根据当前选中的过滤器组合，动态切换OR/AND逻辑：

function applyCustomFilter() {
  // 没有选中任何过滤器时，显示全部项目
  if (activeFilters.length === 0) {
    filterizr.filter('all');
    return;
  }

  // 定义需要特殊处理的过滤器组合
  const isABCombo = activeFilters.includes('A') && activeFilters.includes('B') && activeFilters.length === 2;
  const isBCCombo = activeFilters.includes('B') && activeFilters.includes('C') && activeFilters.length === 2;

  // 调用Filterizr的filter方法，传入自定义筛选函数
  filterizr.filter(function() {
    // 获取当前项目的所有过滤器标签（假设项目用data-category存储，空格分隔）
    const itemTags = this.getAttribute('data-category').split(' ');

    // 根据不同组合应用不同逻辑
    if (isABCombo) {
      // A+B组合：OR逻辑，匹配A或B即可
      return activeFilters.some(tag => itemTags.includes(tag));
    } else if (isBCCombo) {
      // B+C组合：AND逻辑，必须同时匹配B和C
      return activeFilters.every(tag => itemTags.includes(tag));
    } else {
      // 其他组合可以设置默认逻辑，比如全局OR
      return activeFilters.some(tag => itemTags.includes(tag));
    }
  });
}

关键细节说明 #

• 项目标签存储：示例中假设项目元素用data-category属性存储过滤器标签（比如<div class="filtr-item" data-category="A C">），你可以根据实际项目结构调整获取标签的方式。
• 扩展组合规则：如果需要更多特殊组合（比如A+B+C用AND），只需要新增对应的判断条件即可。
• 复选框适配：如果用复选框作为过滤器，只需要把监听事件改成change，并通过checked属性判断选中状态，逻辑大同小异。

内容的提问来源于stack exchange，提问作者immi