本文详解基于原生 javascript 的博客卡片分类筛选功能实现，重点解决因 `data-category` 值不匹配导致的“全部显示”失效问题，并提供可直接运行的修复代码、结构优化建议与健壮性增强方案。
在构建响应式博客页面时，按类别（如「Digital Marketing」「Tips & Advice」「Cryptocurrency」）动态筛选内容卡片是常见需求。你已正确采用语义化 data-category 属性标记卡片与按钮，也使用了 DOMContentLoaded 事件确保 DOM 就绪，但筛选逻辑存在一个关键不一致点：过滤按钮中“All”项的 data-category="filter-all" 与 JavaScript 中硬编码的 'all' 字符串不匹配，导致点击“All”时无卡片显示。
✅ 正确的筛选逻辑修复
将判断条件中的 'all' 改为 'filter-all'，使其与 HTML 中的属性值严格一致：
document.addEventListener("DOMContentLoaded", () => {
"use strict";
const filterButtons = document.querySelectorAll('.blog-filters button');
const articleCards = document.querySelectorAll('.article-card');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
const selectedCategory = button.getAttribute('data-category');
articleCards.forEach(card => {
const cardCategory = card.getAttribute('data-category');
// ✅ 修复点：与 button 的 data-category 值保持一致
if (selectedCategory === 'filter-all' || selectedCategory === cardCategory) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
});
});
});⚠️ 注意：原始代码末尾缺失闭合括号 });，已补全——这是语法错误，会导致脚本完全不执行。
? 进阶优化建议（提升健壮性与可维护性）
-
默认状态高亮当前激活按钮
点击筛选后，建议为选中按钮添加 .active 类，便于用户识别当前视图：// 在 click 回调内添加（紧接在 forEach 之前） filterButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); -
支持空态提示（可选）
当某类别无匹配卡片时，可显示友好提示：const visibleCount = Array.from(articleCards).filter( card => selectedCategory === 'filter-all' || selectedCategory === card.getAttribute('data-category') ).length; if (visibleCount === 0 && selectedCategory !== 'filter-all') { document.querySelector('.posts-list').innerHTML = '暂无该类别下的文章。
'; } -
CSS 层级解耦（推荐）
避免直接操作 style.display，改用 CSS 类控制显隐，更利于主题定制与动画：.article-card.hidden { display: none !important; }对应 JS 修改为：
card.classList.toggle('hidden', !(selectedCategory === 'filter-all' || selectedCategory === cardCategory) );
✅ 完整 HTML 结构验证要点
- 所有 .article-card 元素必须包含 data-category，且值与按钮中完全一致（区分大小写与连字符）；
- “All”按钮必须使用 data-category="filter-all"（不可写作 "all" 或 "all-categories"）；
- 确保
