如何实现博客文章卡片的动态分类筛选功能

博客文章卡片的动态分类筛选功能可以让用户快速找到感兴趣的内容，不需要跳转页面就能完成分类切换，提升整体浏览体验。实现这个功能的核心是通过JavaScript监听分类按钮的点击事件，对文章数据进行过滤后重新渲染对应的卡片。

基础数据结构设计

首先需要准备文章数据和分类数据，文章数据中需要包含分类标识，方便后续筛选匹配。以下是示例数据结构：

// 分类数据
const categories = [
  { id: 'all', name: '全部' },
  { id: 'frontend', name: '前端开发' },
  { id: 'backend', name: '后端开发' },
  { id: 'devops', name: '运维部署' }
];

// 文章卡片数据
const articleList = [
  {
    id: 1,
    title: 'Vue3组件通信方式详解',
    category: 'frontend',
    desc: '介绍Vue3中多种组件通信的实现方案',
    date: '2024-05-10'
  },
  {
    id: 2,
    title: 'Node.js接口鉴权实现',
    category: 'backend',
    desc: '基于JWT实现Node.js接口的权限校验',
    date: '2024-05-08'
  },
  {
    id: 3,
    title: 'Docker容器部署实战',
    category: 'devops',
    desc: '讲解Docker打包部署前端项目的完整流程',
    date: '2024-05-06'
  },
  {
    id: 4,
    title: 'React Hooks使用技巧',
    category: 'frontend',
    desc: '分享React Hooks开发中的实用小技巧',
    date: '2024-05-04'
  }
];

页面结构搭建

页面需要包含分类按钮区域和文章卡片展示区域，分类按钮对应上面的分类数据，卡片区域初始渲染所有文章。结构如下：

<div class="filter-container">
  <div class="category-btns" id="categoryBtns">
    <!-- 分类按钮会动态生成 -->
  </div>
  <div class="article-cards" id="articleCards">
    <!-- 文章卡片会动态生成 -->
  </div>
</div>

核心筛选逻辑实现

1. 渲染分类按钮

首先遍历分类数据生成按钮，给全部按钮添加默认激活样式，同时给每个按钮绑定点击事件：

const categoryBtns = document.getElementById('categoryBtns');

// 渲染分类按钮
function renderCategoryBtns() {
  categoryBtns.innerHTML = categories.map(item => {
    return `<button class="category-btn ${item.id === 'all' ? 'active' : ''}" data-id="${item.id}">${item.name}</button>`;
  }).join('');

  // 绑定按钮点击事件
  const btns = categoryBtns.querySelectorAll('.category-btn');
  btns.forEach(btn => {
    btn.addEventListener('click', function() {
      // 移除所有按钮的激活样式
      btns.forEach(b => b.classList.remove('active'));
      // 给当前点击的按钮添加激活样式
      this.classList.add('active');
      // 获取当前选中的分类id
      const currentCategory = this.dataset.id;
      // 执行筛选逻辑
      filterArticles(currentCategory);
    });
  });
}

2. 筛选文章数据

根据选中的分类id过滤文章数据，如果选中的是全部则直接返回所有文章：

// 筛选文章数据
function filterArticles(categoryId) {
  if (categoryId === 'all') {
    return articleList;
  }
  return articleList.filter(item => item.category === categoryId);
}

3. 渲染文章卡片

将筛选后的文章数据渲染成卡片结构，插入到卡片容器中：

const articleCards = document.getElementById('articleCards');

// 渲染文章卡片
function renderArticleCards(list) {
  if (list.length === 0) {
    articleCards.innerHTML = '<p class="empty-tip">暂无对应分类的文章</p>';
    return;
  }
  articleCards.innerHTML = list.map(item => {
    return `
      <div class="article-card">
        <h3 class="card-title">${item.title}</h3>
        <p class="card-desc">${item.desc}</p>
        <p class="card-date">发布时间：${item.date}</p>
      </div>
    `;
  }).join('');
}

初始化与优化

页面加载完成后先执行初始化操作，同时可以添加简单的过渡效果提升体验：

// 初始化
function init() {
  renderCategoryBtns();
  renderArticleCards(articleList);
}

// 页面加载完成后执行初始化
window.addEventListener('DOMContentLoaded', init);

如果需要优化渲染性能，可以在筛选时先隐藏不符合条件的卡片，而不是重新生成所有DOM，减少重排重绘的开销。如果是数据量较大的场景，还可以结合虚拟列表的方案进一步优化渲染效率。

整个功能的实现逻辑并不复杂，核心就是事件监听、数据过滤、DOM更新三个环节，开发者可以根据实际的博客样式需求调整卡片和按钮的样式，适配不同的页面设计。

JavaScript动态筛选前端交互博客开发修改时间：2026-07-20 09:42:40