HTML本身不能做多条件筛选标签切换，所有逻辑必须由JavaScript驱动；核心是用data-category统一标记语义、FormData或Set管理状态、单次filter()合并判断条件，而非class模拟或反复重排DOM。
HTML 本身不能做多条件筛选标签切换，所有逻辑必须由 JavaScript 驱动；核心是用 data-category 统一标记语义、FormData 或 Set 管理状态、单次 filter() 合并判断条件，而不是靠 class 模拟或反复重排 DOM。
为什么不能用 class 做筛选条件绑定
很多人写 class="tag-react tag-vue" 再用 document.querySelectorAll(".tag-react") 查元素，结果出问题：class 名膨胀难维护、样式和逻辑耦合、还容易误匹配（比如 .tag-react 会命中 class="tag-reactive"）。更糟的是，加个新标签就得改 JS 和 CSS，一碰就崩。
正确做法是只用 data-category 属性，值统一小写、无空格、无符号：
<button data-category="react">React</button> <div data-category="react">...</div> <div data-category="vue">...</div> <div data-category="react vue">...</div> <!-- ❌ 错误：一个属性存多个值 -->
如果一个内容属于多个标签，就拆成多个 data- 属性：data-category-react + data-category-vue，或者用 JSON 字符串（需 JSON.parse() 解析）——但推荐前者，简单、可读、支持原生选择器。
多选标签怎么存状态并判断匹配
用户点了「React」又点「Vue」，你要显示所有含任一标签的内容。别写死 if (cat === "react" || cat === "vue")，这种代码没法扩展。
- 用
Set存激活项：const activeCategories = new Set(["react", "vue"]) - 遍历每个内容节点时，检查它是否匹配任意一个：
activeCategories.has(item.dataset.category) - 注意：
item.dataset.category是字符串，Set.has()是严格相等，所以初始化时统一转小写，避免大小写不一致导致匹配失败 - 点击事件里用
e.target.closest('[data-category]')取值，防止点到按钮里的span或图标时读不到dataset
表格多条件筛选怎么合并判断才不漏行
常见错误是链式调用 .filter().filter()，或者嵌套 if —— 中间一次过滤把行筛没了，后续条件就没得判了；嵌套又容易漏掉“全部满足”的逻辑。
正确写法是单次 filter() 回调内，为每个条件单独计算布尔值，再用 && 连接：
const matchesName = nameInput.value
? row.cells[0].textContent?.trim().toLowerCase().includes(nameInput.value.toLowerCase())
: true;
const matchesStatus = statusSelect.value
? row.cells[2].dataset.status === statusSelect.value
: true;
<p>if (matchesName && matchesStatus) {
tr.style.display = '';
} else {
tr.style.display = 'none';
}</p>
关键点：
- 每个条件默认返回
true（不限制），避免空输入导致整行被隐藏 - 精确匹配优先用
dataset.status而不是单元格文本，防格式干扰 - 只遍历
tbody tr，跳过表头、分页栏等非数据行
显隐控制为什么别直接设 style.display
直接写 el.style.display = "none" 再恢复，会丢原始 display 值（比如原来是 inline-flex，恢复成 block 就错位），移动端还会频繁触发重排，滑动卡顿。
更稳妥的做法是用 CSS 类切换：
.filter-item { display: none; }
.filter-item--active { display: block; }
JS 只负责增删类名：item.classList.add('filter-item--active')、otherItems.forEach(i => i.classList.remove('filter-item--active'))。这样样式逻辑全在 CSS，动画、主题、响应式都好控制，也方便同步 aria-hidden 保障无障碍。
最常被忽略的是首次加载没激活任何标签，所有元素默认 display: none，页面直接白屏——必须在 JS 初始化时手动激活一个，或服务端渲染时就给默认项加上 filter-item--active 类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
