本文详解基于原生 javascript 的博客卡片分类筛选功能实现，重点解决因 `data-category` 值不匹配导致的“全部显示”失效问题，并提供可直接运行的修复代码、结构优化建议与健壮性增强方案。

在构建响应式博客页面时，按类别（如「Digital Marketing」「Tips & Advice」「Cryptocurrency」）动态筛选内容卡片是常见需求。你已正确采用语义化 data-category 属性标记卡片与按钮，也使用了 DOMContentLoaded 事件确保 DOM 就绪，但筛选逻辑存在一个关键不一致点：过滤按钮中“All”项的 data-category="filter-all" 与 JavaScript 中硬编码的 'all' 字符串不匹配，导致点击“All”时无卡片显示。

✅ 正确的筛选逻辑修复

将判断条件中的 'all' 改为 'filter-all'，使其与 HTML 中的属性值严格一致：

git摸鱼周报自动化

生成周报：读取本机 Git 仓库最近一周的提交记录，按项目分类提炼总结，生成标准周报格式，通过微信推送并返回给用户。触发词：周报、weekly report、git总结、提交记录总结、工作周报。

下载

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';
        }
      });
    });
  });
});

⚠️ 注意：原始代码末尾缺失闭合括号 });，已补全——这是语法错误，会导致脚本完全不执行。

? 进阶优化建议（提升健壮性与可维护性）

1. 默认状态高亮当前激活按钮
   点击筛选后，建议为选中按钮添加 .active 类，便于用户识别当前视图：

   // 在 click 回调内添加（紧接在 forEach 之前）
   filterButtons.forEach(btn => btn.classList.remove('active'));
   button.classList.add('active');

2. 支持空态提示（可选）
   当某类别无匹配卡片时，可显示友好提示：

   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 = 
       '<p class="text-muted">暂无该类别下的文章。</p>';
   }

3. 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"）；
• 确保 <script> 标签置于 </script>