Отфильтруйте содержимое div по атрибуту данных с помощью флажка, используя JQuery

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 вместе, это означает, что они находятся рядом друг с другом, в вашем случае .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>

Answer 2

Пояснение в коде:

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