Question

我正在尝试使用jquery同位素过滤，在页面上过滤HTML块，每个包含2个参数： 1类 2类

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

HTML

FriendID

JS

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

到此为止，它可以通过点击按钮进行过滤。但是现在，我还希望使用$( 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'); }); }); });下拉列表来过滤相同的HTML块。即OR条件在项目选择器中实现。 N现在<select></select>的其他代码是：

HTML

<select>

JS

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

Answer 1

html中的一点变化并更改过滤器代码以获取选项值，因为select选项中没有数据过滤器属性。一个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 });
  });

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

1 个答案: