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

试试这样：

＆＃13;

| ?- mutate_if(isOdd, addOne, [1,2,3,4,5], L).

L = [2,2,4,4,6]

yes

＆＃13;

$(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
    });
  });

});

＆＃13;

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

＆＃13;

JQuery - 无法使用isotope js woocommerce产品进行过滤

1 个答案: