我有一个同位素组合过滤器设置,其中包含许多数据过滤器组,每个都有一个休息/显示所有列表项:
<li><a href="#" data-filter="*">Show all</a></li>
是否可以重置所有数据过滤器组 - “重置所有”链接?
我目前的javascript是:
var $container = $('.content ul.sort'),
filters = {};
$container.isotope({
itemSelector : '.dynamic-filter'
});
// filter buttons
$('.filter a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
// i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
有什么想法吗?
&lt; - 编辑 - &gt;
似乎找到了我自己的问题的答案:
$(".isotope-reset").click(function(){
$(".content ul.sort").isotope({
filter: '*'
});
});
答案 0 :(得分:17)
由于海报没有在答案中给出答案,这里是针对那些得到这个问题并且没有看到答案的人
以下代码重置了同位素过滤器:
$(".isotope-reset").click(function(){
$(".content ul.sort").isotope({
filter: '*'
});
});
答案 1 :(得分:2)
我正在寻找类似的东西,以为我会把答案放在这里以防其他搜索者遇到这个问题。我在海报上提到的解决方案的问题是,至少对我来说,它并没有真正重置。我希望按钮重置以及过滤器。此外,我遇到了一个奇怪的错误,在点击重置按钮后,我的过滤器表现不正常。
下面的脚本解决了我所有的问题(在这个答案的日期,大声笑)。资料来源:https://github.com/metafizzy/isotope/issues/928
var $anyButtons = $('.filters').find('button[data-filter=""]');
var $buttons = $('.filters button');
$('.button--reset').on( 'click', function() {
// reset filters
filters = {};
$grid.isotope({ filter: '*' });
// reset buttons
$buttons.removeClass('is-checked');
$anyButtons.addClass('is-checked');
});