使用JQuery通过带复选框的data-attribute筛选div内容

Question

我在div中有一个卡片列表，类名为.cards-list，我希望使用复选框按数据属性筛选这些卡片

我尝试了下面的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>

jQuery

$(".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);
   }
});

Answer 1

你犯了几个错误。

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

也不需要过滤器，你可以在你的元素选择器中做过滤（女巫也不是正确的目标）:

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

如果您将.cards-list.card放在一起，则表示它们彼此相邻，在您的示例中，.cards位于.cards-list内部。

null

$(".cardCheckBox").change(function () {
   var value = $(this).val();
   //console.log(value);
   if (this.checked == true) {
   //console.log(true);
      $(".cards-list .card[data-category="+value+"]").hide();
      }else{
      $(".cards-list .card[data-category="+value+"]").show();
      }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 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>

Answer 2

代码说明:

null

// Cache your elements
const $cards = $("[data-category]");
const $cardsCkb = $(".cardCheckBox");

$cardsCkb.on("change", function() {
  
  // Create an Array of checked values
  const checkedArr = $cardsCkb.filter(":checked").get().map(el => el.value);
  
  // Show all and exit if no filter is active
  if (!checkedArr.length) return $cards.removeClass("is-hidden");
    
  // Finally, use jQuery's .toggleClass() and JS's Array.prototype.includes()
  $cards.each(function() {
    const category = $(this).data("category");
    $(this).toggleClass("is-hidden", !checkedArr.includes(category));
  });

});

.card.is-hidden {
  display: none;
}

<!-- FILTER CHECKBOX -->
<div class="form-check">
  <label><input class="cardCheckBox" type="checkbox" value="foo"> foo</label>
</div>
<div class="form-check">
  <label><input class="cardCheckBox" type="checkbox" value="xyz"> xyz</label>
</div>

<!-- CARDS LIST I WANT TO FILTER -->
<div class="cards-list mt-2">

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>