使用 JQuery 按帶有復選框的數據屬性過濾 div 內容

Question

我在div中有一個卡片列表，其中包含 class 名稱.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

代碼中的解釋：

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

Answer 2

你犯了幾個錯誤。

您的if語句中需要this.checked == true 。 this.checked為您提供true和false ，您需要指定要查找的內容。

也不需要過濾器，您可以在元素選擇器中進行過濾（女巫也沒有正確定位）：

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

如果您將.cards-list.card放在一起，則表示它們彼此相鄰，在您的情況下.card在.cards-list內。

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