javascript - 基于自定义数据属性的产品过滤

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>