网格画廊多筛选功能失效问题排查

核心问题拆解 #

当前存在两个关键问题：

• 子分类无法正常显示
• 基于类别的图片筛选功能失效

预期功能：点击All、Urbanism、Architecture、Interior选项时，同步显示对应子分类，并完成图片筛选，明确标注图片所属类别。

子分类显示问题修复步骤 #

• 检查事件绑定：确认分类选项的点击事件已正确绑定，比如用addEventListener或框架内置的事件绑定方法，避免出现事件未触发的情况。
• 验证DOM状态切换逻辑：子分类容器初始若为隐藏状态（如display: none），需确保点击分类时执行了正确的显示操作——比如移除hidden类，或直接修改style.display为block/flex。
• 核对数据关联：每个父分类需对应正确的子分类数据，可通过data-category这类属性存储关联标识，点击时精准匹配并渲染对应子分类内容。

图片筛选功能修复步骤 #

• 确认图片的类别标识：每张图片必须带有对应父分类的属性标记（如data-category="urbanism"），确保筛选逻辑能通过该属性匹配目标图片。
• 排查筛选逻辑：
  • 点击All时，需移除所有图片的隐藏样式，显示全部内容；
  • 点击具体分类时，遍历所有图片，匹配对应data-category值，显示匹配项、隐藏不匹配项。
• 检查样式冲突：确保筛选用的隐藏样式（如display: none）没有被其他CSS规则优先级覆盖，导致筛选后视觉无变化。

调试技巧 #

• 打开浏览器开发者工具（F12），查看Console面板是否有JS报错，比如未定义变量、DOM元素查找失败等；
• 在分类点击的事件函数中添加console.log，输出当前选中分类、子分类数据、图片匹配结果，验证逻辑是否按预期执行；
• 核对CSS选择器与JS中使用的类名、属性名是否完全一致，避免因拼写错误导致功能失效。

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