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>

标签： javascriptjqueryhtml

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>