如何利用数据属性与批量操作简化过滤逻辑避免重复class切换

本文揭秘如何通过data-filter属性构建声明式过滤系统，告别冗余的class切换代码，实现高效可控的内容筛选。

本文介绍一种基于 data-filter 属性与现代 DOM API 的声明式过滤方案，通过统一管理按钮状态和元素可见性，彻底避免为每个元素单独增删 active/hidden 类的冗余代码。

在多类别内容筛选功能开发中，新手常采用硬编码方式，逐个元素调用classList.add()和classList.remove()。这种方法不仅代码臃肿、维护困难，还违背了单一职责与可扩展性原则。接下来我们将重构这一逻辑，打造简洁高效的过滤系统。

✅ 核心思路：声明式数据驱动 + 批量 DOM 操作

摒弃手动控制每个元素的方式，采用以下策略：

1. 为按钮添加data-filter="xxx"属性，明确过滤意图
2. 为内容项设置data-filter="breakfast"或data-filter="breakfast,lunch"（支持多标签）
3. 使用document.querySelectorAll()批量获取元素，结合forEach()和toggle()实现状态同步

? 示例代码（完整可运行）

/* 默认隐藏非 active 元素 */.filter > div:not(.active) {  display: none;}/* 按钮高亮样式 */.filter-buttons button.active {  border-bottom: 2px solid #007bff;  font-weight: bold;}

// 统一绑定按钮事件document.querySelectorAll('.filter-buttons button').forEach(button => {  button.addEventListener('click', function () {    // 1. 清除所有按钮的 active 状态    document.querySelectorAll('.filter-buttons button').forEach(btn =>       btn.classList.remove('active')    );    // 2. 当前按钮设为 active    this.classList.add('active');    // 3. 获取当前筛选类型    const filterType = this.dataset.filter;    // 4. 批量处理所有内容项    document.querySelectorAll('.filter > div').forEach(item => {      if (filterType === 'all') {        item.classList.add('active');      } else {        // 支持多值匹配：如 data-filter="breakfast,lunch"        const itemFilters = item.dataset.filter?.split(',') || [];        item.classList.toggle('active', itemFilters.includes(filterType));      }    });  });});

⚠️ 注意事项与最佳实践

1. 健壮性增强：使用可选链item.dataset.filter?.split(',')防止未设置data-filter导致报错
2. 性能友好：querySelectorAll返回静态NodeList，适合一次性遍历，避免重复查询
3. 可扩展性强：新增分类只需增加带data-filter的按钮和对应内容项，无需修改JS逻辑
4. CSS解耦：显示/隐藏完全由.active类控制，便于后续改用其他CSS效果
5. 无障碍友好：建议为按钮添加aria-pressed属性提升可访问性

✅ 总结

采用data-*属性承载业务逻辑，结合批量DOM操作取代重复类名切换，不仅精简代码，更提升可维护性。这种模式适用于各类筛选场景，真正实现意图明确、修改局部的高质量代码。