javascript - 与表单选择一起使用时的 jQuery 同位素过滤器问题

Question

我正在尝试使用 jquery 同位素过滤来页面过滤 HTML block ，每个 block 包含 2 个参数:1 级2 级

当我使用按钮按 1 类进行过滤时，它可以工作。但是，当我在 HTML block 中另外添加 2 类并尝试通过另一个下拉列表选择进行过滤时，它不起作用。 M 卡住了，想知道我哪里出错了？

HTML

<div id="filters" class="button-group">
<div class="col-md-6"> 
 <ul>
<li><button class="button is-checked" data-filter="*">All</button></li>
<li><button class="button" data-filter=".1">One only</button></li>
</ul>
</div><!--------col-md-6 ends here-------------------->

</div><!-------/#filter ends here---------->

JS

$( document ).ready( function() {
  // init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.class-1',
layoutMode: 'fitRows',
getSortData: {
  name: '.name',
  symbol: '.symbol',
  number: '.number parseInt',
  category: '[data-category]',
  weight: function( itemElem ) {
    var weight = $( itemElem ).find('.weight').text();
    return parseFloat( weight.replace( /[\(\)]/g, '') );
  }
}
  });


  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
  });

 // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
  $buttonGroup.find('.is-checked').removeClass('is-checked');
  $( this ).addClass('is-checked');
    });
  });

});

到目前为止，通过单击按钮进行过滤效果良好。但现在，我还想通过使用 <select></select> 来过滤相同的 HTML block 。 ， 落下。即 OR 条件在项目选择器中实现。N 现在附加代码 <select>是:

HTML

<div id="filters" class="select-group">
<div class="col-sm-8">
  <select class="form-control filter_by_type2 select" id="filter_2" placeholder="">
 <option value="2" data-filter=".2">Two only</option>
</select>
</div>
</div>

JS

$( document ).ready( function() {
  // init Isotope
  var $container = $('.isotope').isotope({
itemSelector: '.class-1' || '.class-2',
layoutMode: 'fitRows',
getSortData: {
  name: '.name',
  symbol: '.symbol',
  number: '.number parseInt',
  category: '[data-category]',
  weight: function( itemElem ) {
    var weight = $( itemElem ).find('.weight').text();
    return parseFloat( weight.replace( /[\(\)]/g, '') );
  }
}
  });


  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
  });

  // bind select option value
  $('#filters').on( 'change', 'select', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
      });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
  $buttonGroup.find('.is-checked').removeClass('is-checked');
  $( this ).addClass('is-checked');
   });
  });

});

Answer 1

对 html 进行一些更改，并更改过滤器代码以获取选项值，因为选择选项中没有数据过滤器属性。 jsfiddle 会有所帮助，因为我看不到实际的代码工作。

HTML

<div class="select-group">
<div class="col-sm-8">
<select id="filters" class="form-control filter_by_type2 select" id="filter_2" placeholder="">
 <option value=".2">Two only</option>
</select>
</div>
</div>

JS

 // bind select option value
 $('#filters').on( 'change', function() {
 var filterValue = $( this ).val();
 // use filterFn if matches value
 filterValue = filterFns[ filterValue ] || filterValue;
 $container.isotope({ filter: filterValue });
  });