Question

希望有人可以帮助我指出正确的方向。我一直在播放我在这里找到的一些代码，但我对javascript部分的工作原理有点困惑。

目前，如果您选中多个复选框，则会选中所有匹配的结果。我希望它只有在两个复选框都为真时才匹配，而不是在它的一个或另一个时列出所有。

爪哇

$(document).ready(function () {
            $('.results > li.' + $(this).attr('rel')).show();

            $('div.tags').find('input:checkbox').live('click', function () {
                $('.results > li').hide();
                $('div.tags').find('input:checked').each(function () {
                    $('.results > li.' + $(this).attr('rel')).show();
                });
            });
        });

HTML

<div class="tags">
    <label><input type="checkbox" rel="PVC" />PVC</label>
    <label><input type="checkbox" rel="316SS" />316SS</label>
    <label><input type="checkbox" rel="PVDF" />PVDF</label>
    <label><input type="checkbox" rel="Other" />Other</label>
</div>

<ul class="results">
    <li class="PVC">Result 1 (PVC Only)</li>
    <li class="316SS">Result 2 (316SS Only)</li>
    <li class="PVDF">Result 3 (PVDF Only)</li>
    <li class="Other">Result 4 (Other Only)</li>
    <li class="PVC PVDF">Result 5 (PVC & PVDF)</li>
    <li class="316SS PVDF">Result 6 (316SS & PVDF)</li>
    <li class="PVDF Other">Result 7 (PVDF & Other)</li>
    <li class="PVC 316SS PVDF Other">Result 8 (All Classes)</li>
</ul>

JSFiddle

所以从我的JSFiddle，你可以看看你是否检查了PVC＆amp; PVDF，PVC的所有结果都出现了，PVDF的所有结果也是如此。在特定情况下，当选中2个或更多个框时，我希望它仅匹配两者 PVC＆amp;的结果。 PVDF在他们的班级，而不是一个或另一个。希望这有意义吗？

Answer 1

您可以使用.filter（）之类的

＆＃13;

$(document).ready(function() {
  var $checks = $('div.tags input:checkbox').on('change', function() {
    var $results = $('.results > li').hide();
    $checks.filter(':checked').each(function() {
      $results = $results.filter('.' + $(this).attr('rel'))
    });
    $results.show();
  });

  //set the initial display state
  $checks.eq(0).change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tags">
  <label><input type="checkbox" rel="PVC" />PVC</label>
  <label><input type="checkbox" rel="316SS" />316SS</label>
  <label><input type="checkbox" rel="PVDF" />PVDF</label>
  <label><input type="checkbox" rel="Other" />Other</label>
</div>
<ul class="results">
  <li class="PVC">Result 1 (PVC Only)</li>
  <li class="316SS">Result 2 (316SS Only)</li>
  <li class="PVDF">Result 3 (PVDF Only)</li>
  <li class="Other">Result 4 (Other Only)</li>
  <li class="PVC PVDF">Result 5 (PVC & PVDF)</li>
  <li class="316SS PVDF">Result 6 (316SS & PVDF)</li>
  <li class="PVDF Other">Result 7 (PVDF & Other)</li>
  <li class="PVC 316SS PVDF Other">Result 8 (All Classes)</li>
</ul>

＆＃13;

jQuery复选框过滤器 - 从OR到AND

1 个答案: