jQuery同位素复选框过滤器,如果全部取消选中则不显示任何项目

Question

这是关于过滤jQuery同位素itemselector的输入复选框.

请参阅此处的演示,在页面加载时选中复选框.但是,当用户取消选中所有问题时,我偶然发现问题,它只显示所有.items而不是空容器.

$checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values                
    $checkboxes.filter(':checked').each(function(){
    filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $container.isotope({ filter: filters });
});

非常感谢,欢呼

Answer 1

同位素库按预期工作.

filter - 使用与选择器匹配的show item元素设置过滤器,并隐藏不匹配的元素.

值'*'或''(空字符串):显示所有项目元素

如果您不希望出现此行为,而是希望在选择每个过滤器时不显示任何元素,则应将过滤器字符串更改为不存在的内容,例如

if(filters.length == 0){
    filters = 'purplemonkyeydishwasher';
}
else{
    filters = filters.join(', ');
}
$container.isotope({ filter: filters });

这将具有您想要的行为.我更新了小提琴.现在,当选择所有过滤器时,它会隐藏所有元素.