javascript - jQuery同位素过滤器没有项目？

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

刚刚在 isotopes github issue-page 找到了一个很好的解决方案。

---

同位素 v1：

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


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

请参阅同位素帮助 - 访问实例

---

同位素 v2

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

请参阅同位素 - 过滤项目

---

在此处查看完整帖子

Answer 4

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

像这样

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