我正在使用metafizzy'同位素来过滤项目。
我有 2 个过滤器行:类别 1(电缆、工具、材料 1、填充物 2)和类别2(电缆1,电缆2,工具1,工具2)。
如果组合两个类别时没有结果,是否可以停用过滤器(使用 CSS,例如灰色)?
示例:我单击过滤器"stuff2",在类别 2 中没有匹配的项目,因此 jQuery 将一个类添加到类别 2,就像将它们灰化一样。
我的同位素代码:
jQuery.noConflict();
(function($){
var $container = $('#container'),
filters = {};
$container.isotope({
itemSelector : '.element',
{mfilterscript}
{mfilterscript2}
});
// 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;
});
})(jQuery);
这是绝对可能的。
你需要做几件事
1) 检查滤波器阵列的长度,以了解所有可能的未来滤波器组合
例如,假设您有一个水果列表,所有这些水果都有一个类"水果"和一个类水果类型"苹果"、"梨"、"橙子"等。
你会做这样的事情:
$('a.fruit').each(function() {
var $this = $(this);
var getVal = $this.attr('data-filter-value');
var numItems = $('img'+getVal+':not(.isotope-hidden)').length; // <-- This example is for filtering img tags but just replace it with whatever element you're actually filtering
if(!$(this).hasClass('active') && !$that.hasClass('fruit') ){ // <-- i.e. it's a fruit that has not already disabled by previous filter combinations
if(numItems === 0){
$this.addClass('disabled');
}
else {
$this.removeClass('disabled');
}
}
else if( $this.hasClass('active') && $this.hasClass('disabled') ){
$this.removeClass('disabled');
}
else if(!$(this).hasClass('active') ) {
if(numItems > 0){
$this.removeClass('disabled');
}
}
});
2)您将需要添加一些代码来处理禁用的过滤器,以便无法触发它们。最好的地方是靠近过滤程序的顶部。即,在处理任何过滤之前,您希望退出例程。
有很多方法可以做到这一点(例如e.preventDefaults
,但在这种情况下,只return false
可能更安全,这样我们就不必担心事后重新绑定默认行为)。
例如,您可以执行以下操作:
$('.filter a').click(function(){
// exit directly if filter already disabled
if ($(this).hasClass('disabled') ){
return false;
} else if ($(this).hasClass('selected') ) {
return false;
}
...
}); // close routine
这是一切工作的现场示例
这是该示例的所有JavaScript。
希望对您有所帮助!