Question

在第一版Isotope 中，它在隐藏项目时将类应用于项目（.isotope-hidden）。在这个新版本2中，这些类没有被应用。

我的旧脚本（请注意我使用组合过滤器，因此这是一个项目点击功能）工作正常如下：

$container.isotope({ filter: selector }, function noResultsCheck() {
     var numItems = $('.device:not(.isotope-hidden)').length;
     var noItemsAlert = $('#equipment-list-container .alert');
     if (numItems == 0) {
       noItemsAlert.show(250);
     } else {
       noItemsAlert.hide(250);
     }
});

但是因为我不再有.isotope-hidden这样的事情，所以我努力让它发挥作用。我尝试了以下但没有成功：

$container.isotope({ filter: filterValue }, function noResultsCheck() {
    var numItems = $('.device:visible').length;
    var noItemsAlert = $('#equipment-list-container .alert');
    if (numItems == 0) {
      noItemsAlert.show(250);
    } else {
      noItemsAlert.hide(250);
    }
});

Answer 1

找到解决方案。

隐藏时重新添加'isotope-hidden'类：

// Add hidden class if item hidden
  var itemReveal = Isotope.Item.prototype.reveal;
  Isotope.Item.prototype.reveal = function() {
    itemReveal.apply( this, arguments );
    $( this.element ).removeClass('isotope-hidden');
  };

var itemHide = Isotope.Item.prototype.hide;
Isotope.Item.prototype.hide = function() {
  itemHide.apply( this, arguments );
  $( this.element ).addClass('isotope-hidden');
};

似乎在最新版本中，您无法在之前的同一个地方放置回调。您现在使用'layoutComplete'并将放在 #filters点击功能之后。

// Just showing where filters code would be...
$('#filters').on( 'click', '.btn', function() {
  ...
  $container.isotope({ filter: filterValue });
});

// Show alert if no items returned
var noItemsAlert = $('#equipment-list-container .alert');
$container.isotope( 'on', 'layoutComplete', function() {
  var numItems = $container.find('.item:not(.isotope-hidden)').length;
  if (numItems == 0) {
    noItemsAlert.show(250);
  } else {
    noItemsAlert.hide(250);
  }
});

Demo

Answer 2

基本上你所要做的就是复制提供的代码

// Add hidden class if item hidden
var itemReveal = Isotope.Item.prototype.reveal;
Isotope.Item.prototype.reveal = function() {
itemReveal.apply( this, arguments );
jQuery( this.element ).removeClass('isotope-hidden');
};
var itemHide = Isotope.Item.prototype.hide;
Isotope.Item.prototype.hide = function() {
itemHide.apply( this, arguments );
jQuery( this.element ).addClass('isotope-hidden');
};

到}）（窗口）之前的isotope.pkgd.js的末尾;线

非常感谢！

同位素v2显示＆＃39;没有项目＆＃39; <div>如果没有项目</div>

2 个答案: