javascript - JQuery - 无法使用同位素 js woocommerce 产品进行过滤

Question

我已经编写了一个函数来使用同位素 js 过滤 woocommerce 产品。我正在尝试解决问题。但是过滤器不起作用。HTML 看起来像

<div class = "filters">
<input type="checkbox" class = "do_this_filter" value=".Hand-Wash">Hand wash<br>
<input type="checkbox" class = "do_this_filter" value=".Machine-Wash">Machine wash<br>
</div>
<ul class ='products'>
<li class="items Hand-wash"></li>
<li class="items Machine-Wash"></li>
</ul>

我用的jQuery是

$( function() {
      // init Isotope
      var $grid = $('.products').isotope({
        itemSelector: '.item',
        layoutMode: 'fitRows'
      });

      // bind filter click
      $('.do_this_filter').on( 'click', function() {
        var filterValue = $( this ).val();
        // use filterFn if matches value
        $grid.isotope({ filter: filterValue });
      });
      // change is-checked class
      $('.do_this_filter').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', function() {
          $buttonGroup.find('.is-checked').removeClass('is-checked');
          $( this ).addClass('is-checked');
        });
      });

    });

这没有用任何人都可以帮忙吗？提前致谢。
Jsfiddle

Answer 1

像这样尝试:

$(function() {
  // init Isotope
  var $grid = $('.products'),
    $checkboxes = $('.filters input');

  $grid.isotope({
    itemSelector: '.items',
    layoutMode: 'fitRows'
  });

  $checkboxes.change(function() {
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function() {
      filters.push(this.value);
    });
    filters = filters.join(', ');
    $grid.isotope({
      filter: filters
    });
  });

});

.items {
  width: 100px;
  height: 100px;
  background: red;
  margin: 3px;
  list-style: none;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<div class="filters">
  <input type="checkbox" class="do_this_filter" value=".Hand-wash">Hand wash
  <br>
  <input type="checkbox" class="do_this_filter" value=".Machine-Wash">Machine Wash
  <br>
</div>
<ul class='products'>
  <li class="items Hand-wash">Demo product1</li>
  <li class="items Machine-Wash">Demo product2</li>
</ul>