Question

这是关于过滤jQuery同位素项目选择器的输入复选框。

请参阅演示here，在页面加载时选中复选框。但是，当用户取消选中所有问题时，我偶然发现问题，它只显示所有.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

同位素库是working as intended。

filter - 使用与项目匹配的show item元素设置过滤器   选择器，并隐藏不匹配的元素。

值'*'或''（空字符串）：显示所有项目元素

如果您不想要这种行为，而是希望在选择每个过滤器时不显示任何元素，则应将过滤器字符串更改为不存在的行为，例如。

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

这将具有您想要的行为。我updated the fiddle.，现在它会在选择所有过滤器时隐藏所有元素。

Answer 2

你可以这样做：

$container.isotope({ filter: ( filters == null || filters.length == 0 ) ? 'default' : filters });`

default始终未使用。请参阅演示http://jsfiddle.net/G6LRL/

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

2 个答案: