jQuery多data属性内容筛选：需实现AND/OR逻辑，首筛无结果

问题核心 #

原代码存在两个关键问题：

1. 单一筛选条件选中时，因逻辑判断错误导致无内容显示
2. 未区分**同类型OR（多选其一）和跨类型AND（同时满足）**的筛选逻辑

修复方案 #

1. 拆分筛选条件存储

将不同类型的筛选条件分开存储，避免数组混存导致的判断混乱：

// 分别存储主题和内容类型的选中条件
let selectedCategories = [];
let selectedTypes = [];

2. 优化点击事件处理

点击筛选按钮时，根据data属性类型更新对应数组，并切换选中状态：

$('.filter-pill').on('click', function() {
  const $this = $(this);
  // 判断当前筛选器类型
  const isCategory = $this.data('category-type') !== undefined;
  const value = isCategory ? $this.data('category-type') : $this.data('category-name');
  const targetArray = isCategory ? selectedCategories : selectedTypes;

  // 切换选中状态
  $this.toggleClass('active');
  if ($this.hasClass('active')) {
    targetArray.push(value);
  } else {
    const index = targetArray.indexOf(value);
    if (index > -1) targetArray.splice(index, 1);
  }

  // 执行筛选
  filterItems();
});

3. 实现正确的AND/OR筛选逻辑

筛选函数中，同类型多选采用OR逻辑（满足其一即可），跨类型采用AND逻辑（必须同时满足）：

function filterItems() {
  $('.resource-item').each(function() {
    const $item = $(this);
    const itemCategory = $item.data('category-type');
    const itemType = $item.data('category-name');
    let show = true;

    // 主题筛选：有选中条件时，需匹配其中一个（OR）
    if (selectedCategories.length > 0) {
      show = selectedCategories.includes(itemCategory);
    }
    // 内容类型筛选：有选中条件时，需匹配其中一个（OR），且与主题条件同时满足（AND）
    if (show && selectedTypes.length > 0) {
      show = selectedTypes.includes(itemType);
    }

    $item.toggle(show);
  });
}

4. 初始状态处理

页面加载时默认显示所有内容，添加初始化调用：

$(document).ready(function() {
  filterItems();
});

关键修复点说明 #

• 拆分存储：将主题和内容类型的筛选条件分开，避免数组混存导致的空数组判断错误
• 逻辑区分：同类型多选时只要满足一个条件，不同类型之间必须同时满足
• 空值处理：当某一类无选中条件时，直接跳过该类判断，不会过滤内容

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