JQuery-无法使用同位素js-woocommerce产品进行筛选

JQuery - Unable to filter using isotope js woocommerce products

本文关键字：筛选 js-woocommerce 同位素 JQuery-      更新时间：2023-09-26

我已经编写了一个函数来使用同位素js过滤wooccommerce产品。我正在设法解决这个问题。但是过滤器不起作用。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');
        });
      });
    });

这没用，有人能帮上忙吗。？提前谢谢
Jsfddle

这样尝试：

$(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>

相关文章：