Question

我正在使用同位素过滤具有多个过滤器的列表，其中可能基于某些过滤器的组合，不会显示任何项目。在这种情况下，我想向用户显示一条消息，根据他们的过滤器参数，不存在任何结果。我该怎么做呢，同位素是否有内置的东西来处理这个问题？这是一个jsfiddle的例子。如果没有项目符合过滤器设置，则应显示...

http://jsfiddle.net/cssguru/e4vA3/

   $(function(){

   var $container = $('#container'),
      $checkboxes = $('#filters input');

   $container.isotope({
    itemSelector: '.item'
   });

   $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

您可以查看有多少同位素物品没有添加“同位素隐藏”类。当结果为0时，表示您的所有元素都将被隐藏，您可以触发某些事情发生。您可以使用回调函数，例如每次同位素过滤时运行reLayout。

function noResultsCheck() {
    var numItems = $('.item:not(.isotope-hidden)').length;
    if (numItems == 0) {
        //do something here, like turn on a div, or insert a msg with jQuery's .html() function
        alert("There are no results");
    }
}

将此添加到您的更改功能：

$container.isotope( 'reLayout', noResultsCheck );

http://jsfiddle.net/xvU8D/

Answer 2

只是添加到nspace所说的内容......

你没有需要来添加'reLayout'回调，你可以在这里使用$container.isotope({ filter: filters });这样的代码中进行回调：

$container.isotope({ filter: filters }, function noResultsCheck() {
    var numItems = $('.item:not(.isotope-hidden)').length;
        if (numItems == 0) {
        alert("There are no results");
    }
});

http://jsfiddle.net/xvU8D/33/

这取自这里的文档： http://isotope.metafizzy.co/docs/introduction.html#script - 搜索“回调”页面。

Answer 3

此外，要在同位素2中工作，你必须检查它是否可见/不可见而不是同位素隐藏类：

喜欢这个

var numItems = $('.item:visible').length;

Answer 4

刚刚在同位素github问题页面找到了一个很好的解决方案。

Isotope v1：

$container.isotope({ filter: '.my-crazy.awesome.filter' });


if ( !$container.data('isotope').$filteredAtoms.length == 0) {
    // do stuff when no element was found
}

See Isotope Help - accessing the instance

Isotope v2

if ( !$container.data('isotope').filteredItems.length == 0) {
    // do stuff when no element was found
}

See Isotope - Filtered Items

see full post here

jQuery Isotope过滤器没有项目？

4 个答案: