我正在尝试使用 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');
});
});
});
最佳答案
对 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 });
});
关于javascript - 与表单选择一起使用时的 jQuery 同位素过滤器问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33647632/