使用jQuery通过复选框按data属性筛选卡片列表的问题排查

我来帮你排查下代码里的问题，然后给出修复后的方案：

原代码的核心问题 #

• 选择器错误：$(".cards-list.card") 中间缺少空格，这会查找同时拥有 cards-list 和 card 类的元素，但你的卡片是 cards-list 的后代元素，正确选择器应该是 $(".cards-list .card")
• 取消勾选时的逻辑错误：else 分支里的 $(this) 指向的是触发事件的复选框，不是卡片元素，这行代码完全起不到显示卡片的作用
• 整体逻辑缺陷：你现在的代码只处理单个复选框的状态，没有考虑多个复选框同时选中的情况，应该基于所有选中的复选框值来统一筛选

修复后的完整代码 #

HTML（无需修改）

<!-- FILTER CHECKBOX -->
<div class="form-check">
  <input class="cardCheckBox" type="checkbox" value="foo">
</div>
<div class="form-check">
  <input class="cardCheckBox" type="checkbox" value="xyz">
</div>
<!-- CARDS LIST I WANT TO FILTER -->
<div class="cards-list mt-2">
  <div class="card" data-category="foo">
    <div class="card-body">
      <h2>card title (foo)</h2>
    </div>
  </div>
  <div class="card" data-category="xyz">
    <div class="card-body">
      <h2>card title (xyz)</h2>
    </div>
  </div>
  <div class="card" data-category="foo">
    <div class="card-body">
      <h2>card title (foo)</h2>
    </div>
  </div>
</div>

jQuery 代码

$(".cardCheckBox").change(function() {
  // 收集所有选中的复选框的值
  var selectedCategories = $(".cardCheckBox:checked").map(function() {
    return $(this).val();
  }).get();

  // 获取所有卡片元素
  var allCards = $(".cards-list .card");

  if (selectedCategories.length === 0) {
    // 没有选中任何复选框时，显示所有卡片
    allCards.show();
  } else {
    // 根据选中的分类筛选卡片
    allCards.each(function() {
      var cardCategory = $(this).data("category");
      // 如果卡片的分类在选中列表里，显示，否则隐藏
      $(this).toggle(selectedCategories.includes(cardCategory));
    });
  }
});

代码说明 #

1. 收集选中分类：每次复选框状态变化时，先获取所有被勾选的复选框的value值，存入数组
2. 处理无选中情况：如果没有选中任何复选框，直接显示所有卡片
3. 筛选卡片：遍历所有卡片，检查当前卡片的data-category是否在选中的分类数组中，用toggle()来控制显示/隐藏

这样修改后，就能实现多复选框的组合筛选，勾选单个或多个分类时只显示对应卡片，取消所有勾选则恢复显示全部卡片。

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