Javascript 使用JQuery通过复选框按数据属性筛选div内容

我在一个

div

中有一个卡片列表，类名为

。卡片列表

我想使用复选框按数据属性筛选这些卡片

我尝试了下面的jQuery代码，但在选中复选框后，它不起作用。当我取消选中复选框时，我的所有卡片都被隐藏并且不再显示

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</h2>
      </div>
    </div>

 <div class="card" data-category="xyz">
      <div class="card-body">
         <h2>card title</h2>
      </div>
    </div>

 <div class="card" data-category="foo">
      <div class="card-body">
         <h2>card title</h2>
      </div>
    </div>
</div>

代码说明：

//缓存元素
const$cards=$（“[数据类别]”）；
const$cardsCkb=$（“.cardCheckBox”）；
$cardsCkb.on（“更改”，函数（）{
//创建一个校验值数组
const checkedar=$cardsCkb.filter（“：checked”）.get（）.map（el=>el.value）；
//显示全部，如果没有过滤器处于活动状态，则退出
如果（！checkedArr.length）返回$cards.removeClass（“隐藏”）；
//最后，使用jQuery的.toggleClass（）和JS的Array.prototype.includes（）
$cards.每个（函数（）{
const category=$（this）.data（“category”）；
$（this.toggleClass（“是隐藏的”，！checkedArr.includes（category））；
});
});
.card.is-hidden{
显示：无；
}

福
xyz
富1
xyz 1
富2
您犯了两个错误

在
if
语句中需要
this.checked==true
this。选中
将为您提供
true
和
false
，您需要指定要查找的内容

也不需要过滤器，您可以在元素选择器中进行过滤（witch的目标也不正确）：

如果将
.cards list.card
放在一起，则表示它们彼此相邻，在您的情况下，
.card
位于
.cards list
内


$（.cardCheckBox”）.change（函数（）{
var值=$（this.val（）；
//console.log（值）；
if（this.checked==true）{
//console.log（true）；
$（“.cards list.card[data category=“+value+”]）。hide（）；
}否则{
$（“.cards list.card[data category=“+value+”]）。show（）；
}
});

卡片标题foo
卡片名称xyz
卡片标题foo
当两者都选中时，所有卡都会消失。所以你基本上是在引入一个bug；）@Buljan好吧，这应该是我对OPs问题和代码的理解？I pozdrav；）@RokoC Buljan想知道我什么时候会碰到你。在这里干得不错；）@RokoC，Buljan会的！正如@RokoC.Buljan所说，当选中两个或多个复选框时，此解决方案不是最优的。谢谢，此解决方案对我有效，当选中多个复选框时，它也有效！
$(".cardCheckBox").change(function () {
   var value = $(this).val();
   if (this.checked) {
      $(".cards-list.card").filter(function () {
         $(this).toggle($(this).data("category") == value);
      });
   } else {
       $(this).toggle($(this).data("category") == value);
   }
});


$(".cards-list  .card[data-category="+value+"]")