Фильтрация товаров на основе пользовательских атрибутов данных

Question

Я создаю фильтр продукта на основе флажка. Он должен отображаться и скрываться на основе data-ftype и совпадать с id флажка.

Я видел это в StackOverflow, но моя версия не работает, и я не знаю почему. Буду благодарен за любую помощь.

$('input[type="checkbox"]').click(function() {
  if ($('input[type="checkbox"]:checked').length > 0) {
    $('.c1 >a1').hide();
    $('input[type="checkbox"]:checked').each(function() {
      $('.c1 >a1[data-ftype=' + this.id + ']').show();
    });
  } else {
    $('.c1 >a1').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="full" value="fullrim" />full<br/>
<input type="checkbox" id="half" value="halfrim" />half<br/>
<input type="checkbox" id="without" value="without" />without<br/>
<div class="c1">
  <div class="a1" data-ftype="full">
    abc
  </div>
  <div class="a1" data-ftype="half">
    pqr
  </div>
  <div class="a1" data-ftype="without">
    stuv
  </div>
</div>

Answer 1

Пожалуйста, проверьте код ниже, он работает сейчас

Исправлено изменение селектора вместо $ ('. C1> a1'), замененного на $ ('. C1> .a1')

$('input[type="checkbox"]').click(function() {
  if ($('input[type="checkbox"]:checked').length > 0) {
    $('.c1 > .a1').hide();
    $('input[type="checkbox"]:checked').each(function() {
      $('.c1 > .a1[data-ftype=' + this.id + ']').show();
    });
  } else {
    $('.c1 > .a1').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="full" value="fullrim" />full<br/>
<input type="checkbox" id="half" value="halfrim" />half<br/>
<input type="checkbox" id="without" value="without" />without<br/>
<div class="c1">
  <div class="a1" data-ftype="full">
    abc
  </div>
  <div class="a1" data-ftype="half">
    pqr
  </div>
  <div class="a1" data-ftype="without">
    stuv
  </div>
</div>