基于多组筛选器的网页内容筛选实现问题求助

核心代码实现 #

替换你原有的JavaScript逻辑，以下是符合需求的实现（基于jQuery）：

$(document).ready(function() {
  // 监听所有筛选复选框的点击事件
  $('.filter-checkbox').on('click', function() {
    // 按筛选组分组收集选中项
    const selectedFilters = {};
    $('.filter-group').each(function() {
      const groupKey = $(this).data('group');
      selectedFilters[groupKey] = $(this)
        .find('.filter-checkbox:checked')
        .map(function() { return $(this).val(); })
        .get();
    });

    // 遍历所有标签，校验筛选条件
    $('.tag-item').each(function() {
      const $tag = $(this);
      let isMatch = true;

      // 组内无选中项则跳过校验，否则标签需匹配组内至少一个选中值
      for (const [group, values] of Object.entries(selectedFilters)) {
        if (values.length === 0) continue;
        
        const tagValues = $tag.data(group)?.split(',') || [];
        const hasGroupMatch = values.some(val => tagValues.includes(val));
        
        if (!hasGroupMatch) {
          isMatch = false;
          break;
        }
      }

      // 控制标签显示/隐藏
      $tag.toggle(isMatch);
    });
  });
});

同时需要调整HTML结构，给每个筛选组添加data-group属性，对应标签的data-*属性，示例如下：

<!-- 字母筛选组 -->
<div class="filter-group" data-group="letter">
  <label><input type="checkbox" class="filter-checkbox" value="A"> A</label>
  <label><input type="checkbox" class="filter-checkbox" value="B"> B</label>
</div>

<!-- 类型筛选组 -->
<div class="filter-group" data-group="type">
  <label><input type="checkbox" class="filter-checkbox" value="type1"> 类型1</label>
  <label><input type="checkbox" class="filter-checkbox" value="type2"> 类型2</label>
</div>

<!-- 标签元素示例 -->
<div class="tag-item" data-letter="A" data-type="type1">标签A-1</div>
<div class="tag-item" data-letter="B" data-type="type2">标签B-2</div>

逻辑说明 #

• 同组多选累加（OR规则）：标签只要匹配当前组内任意一个选中项，即通过该组校验
• 跨组多选交集（AND规则）：标签必须同时通过所有有选中项的组的校验
• 无选中项的组不参与筛选，所有标签默认通过该组校验

方案合理性分析 #

1. 逻辑贴合需求：完全匹配你要求的"组内OR、组间AND"规则，和genshin.gg的筛选逻辑对齐
2. 扩展性强：新增筛选组只需添加带data-group的分组容器，标签对应添加data-组名属性即可，无需修改核心逻辑
3. 性能可控：每次筛选仅遍历一次筛选组和标签列表，避免冗余DOM操作，适合中小规模的标签场景

优化方向 #

1. 防抖优化：快速点击多个复选框时，添加防抖减少DOM操作频率，避免页面卡顿：

const debounce = (func, delay = 200) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

// 替换原点击事件绑定
$('.filter-checkbox').on('click', debounce(function() {
  // 原筛选逻辑代码
}));

2. 多值兼容：代码已支持标签同一组多值（比如data-letter="A,B"），无需额外修改即可适配
3. 初始状态校验：页面加载时自动执行一次筛选，确保默认选中的复选框生效
4. 数据缓存：针对大规模标签列表，可提前缓存标签的属性值，避免每次筛选重复读取data-*：

// 页面加载时缓存标签数据
const tagCache = [];
$('.tag-item').each(function() {
  const $tag = $(this);
  const attrs = {};
  $('.filter-group').each(function() {
    const group = $(this).data('group');
    attrs[group] = $tag.data(group)?.split(',') || [];
  });
  tagCache.push({ element: $tag, attrs });
});

// 筛选时直接使用缓存数据
$('.filter-checkbox').on('click', function() {
  // 收集选中项逻辑不变...
  
  tagCache.forEach(item => {
    let isMatch = true;
    for (const [group, values] of Object.entries(selectedFilters)) {
      if (values.length === 0) continue;
      const hasMatch = values.some(val => item.attrs[group].includes(val));
      if (!hasMatch) {
        isMatch = false;
        break;
      }
    }
    item.element.toggle(isMatch);
  });
});

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