求可实现Bootstrap 4卡片筛选并添加隐藏类的轻量脚本方案

我之前也遇到过一模一样的问题——表格用的筛选脚本套Bootstrap卡片完全失效，Shuffle又太笨重，后来自己撸了个超轻量的方案，完美适配Bootstrap 4卡片结构，分享给你：

第一步：HTML结构（贴合Bootstrap样式） #

先搭好筛选控件和卡片容器，给卡片加个data-category属性标记分类，方便筛选：

<!-- 筛选按钮组 -->
<div class="btn-group mb-3" role="group">
  <button type="button" class="btn btn-primary filter-btn active" data-filter="all">全部</button>
  <button type="button" class="btn btn-secondary filter-btn" data-filter="web">Web开发</button>
  <button type="button" class="btn btn-secondary filter-btn" data-filter="mobile">移动开发</button>
  <button type="button" class="btn btn-secondary filter-btn" data-filter="design">设计</button>
</div>

<!-- 卡片容器 -->
<div class="row row-cols-1 row-cols-md-3 g-4" id="card-container">
  <div class="col">
    <div class="card h-100" data-category="web">
      <div class="card-body">
        <h5 class="card-title">React入门指南</h5>
        <p class="card-text">这是一篇Web开发类的卡片内容...</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" data-category="mobile">
      <div class="card-body">
        <h5 class="card-title">Flutter实战</h5>
        <p class="card-text">这是一篇移动开发类的卡片内容...</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" data-category="design">
      <div class="card-body">
        <h5 class="card-title">Figma设计技巧</h5>
        <p class="card-text">这是一篇设计类的卡片内容...</p>
      </div>
    </div>
  </div>
  <!-- 更多卡片... -->
</div>

第二步：核心筛选脚本（轻量jQuery版） #

这个脚本只有几十行，完全基于jQuery（和你之前尝试的方案依赖一致，无缝衔接），利用Bootstrap自带的**d-none**类来隐藏/显示卡片：

$(document).ready(function() {
  // 监听筛选按钮点击
  $('.filter-btn').click(function() {
    // 切换按钮激活状态
    $('.filter-btn').removeClass('active');
    $(this).addClass('active');
    
    // 获取当前筛选类别
    var filterValue = $(this).data('filter');
    
    // 遍历所有卡片容器
    $('#card-container .card').each(function() {
      // 匹配则显示，否则隐藏（注意操作父级.col，避免破坏网格布局）
      if (filterValue === 'all' || $(this).data('category') === filterValue) {
        $(this).closest('.col').removeClass('d-none');
      } else {
        $(this).closest('.col').addClass('d-none');
      }
    });
  });
});

为什么之前的表格方案无效？ #

表格筛选通常直接操作<tr>元素，但Bootstrap卡片嵌套在.col网格容器里，直接隐藏卡片本身会破坏布局——我们需要操作卡片的父元素.col，给它加/移除**d-none**类，这才是之前方案失效的核心原因。

可选：原生JS版本（不依赖jQuery） #

如果不想用jQuery，也可以改成纯原生JS，同样轻量：

document.addEventListener('DOMContentLoaded', function() {
  const filterBtns = document.querySelectorAll('.filter-btn');
  const cardCols = document.querySelectorAll('#card-container .col');
  
  filterBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      // 切换按钮激活状态
      filterBtns.forEach(b => b.classList.remove('active'));
      this.classList.add('active');
      
      const filterValue = this.dataset.filter;
      
      cardCols.forEach(col => {
        const card = col.querySelector('.card');
        if (filterValue === 'all' || card.dataset.category === filterValue) {
          col.classList.remove('d-none');
        } else {
          col.classList.add('d-none');
        }
      });
    });
  });
});

这个方案完全不需要额外依赖，代码简洁，还能完美适配Bootstrap的网格和卡片样式，比Shuffle轻量太多，你可以直接根据自己的分类需求修改data-category的值就行。

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