HTML卡片筛选必须用JavaScript实现，通过data-属性标记语义（如data-breed="golden"），统一用FormData采集表单值并单次filter匹配，空值需跳过，显隐控制应使用CSS类而非style.display。
HTML 卡片列表的多条件筛选必须由 JavaScript 驱动，纯 HTML 无法判断、组合或响应条件变化；核心是用 data- 属性标记卡片语义，配合 FormData 或手动读取统一采集状态，再用单次 filter() 做交集匹配——漏掉“空值跳过”或误用链式 filter 是最常导致结果为空的原因。
怎么给卡片和筛选项绑定语义关系
别用 class="card-apple card-vegetarian" 模拟标签，这会让 JS 逻辑和样式强耦合，且无法区分维度（比如品种 vs. 饮食偏好）。所有筛选依据必须收口到 data- 属性：
-
data-breed="golden"、data-age="adult"、data-health="vaccinated"—— 每个维度一个属性，值小写、无空格 - 筛选控件的
name必须与后端参数一致，如<select name="breed"></select>对应data-breed - 多选 checkbox 要用相同
name（如name="health"），而非name="health[]"—— 方括号在 FormData 中无效，后端收不到数组
为什么勾选多个条件后卡片全消失了
典型症状是：单独选“金毛”有结果，单独选“已绝育”也有，但两者一起选就空白。这不是数据问题，而是过滤逻辑把“不限”当成了“必须满足”：
- 每个条件默认应返回
true（即“不限制”），例如：!filters.breed || card.dataset.breed === filters.breed - 禁止链式调用：
list.filter(byBreed).filter(byAge)—— 第一次过滤后数组变短，第二次遍历的是残缺集合 - 正确写法是单次
filter()内合并所有条件：cards.filter(card => ( !filters.breed || card.dataset.breed === filters.breed ) && ( !filters.age || card.dataset.age === filters.age ))
怎么安全读取表单值并转成筛选对象
不要手动查 document.querySelectorAll('[name]')，容易漏掉 disabled 或动态插入的控件。优先用原生 FormData：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
const form = document.querySelector('form');必须是真实<form></form>，不是<div class="form"> <li> <code>const formData = new FormData(form);自动忽略未选中的 checkbox、合并同名项、跳过 disabled - 转对象时用
Object.fromEntries(formData.entries())，但注意：多个同名 checkbox 只保留最后一个值 —— 改用Array.from(formData.getAll('health'))获取全部选中值 - 价格区间等可空字段需显式判断：
if (minVal !== '' && maxVal !== '') { ... }，不能直接用Number(minVal) ，否则空字符串转为 <code>0会污染结果 - CSS 定义：
.card.hidden { opacity: 0; pointer-events: none; transition: opacity 0.15s; } - JS 里统一执行：
card.classList.toggle('hidden', !matchesAllFilters) - 这样不破坏文档流、动画自然、不影响事件监听器绑定——哪怕你后续给每张卡片加了点击统计，也不会因显隐切换而丢失
显隐控制为什么别碰 style.display
直接设 card.style.display = 'none' 看似简单，但会覆盖原始 display 值（如 flex、grid），恢复时若硬写 'block' 就错位；高频切换还会触发重排，滚动卡顿。
推荐方案只操作 class：
真正难的不是写对 filter 条件，而是让“未激活的筛选项”不参与逻辑判断，以及确保多选 checkbox 的值能被完整采集。这两点一旦出错，前端筛选就会看似正常、实则漏数据，而且很难复现。
