Question

我正在使用Isotope进行过滤。它运作正常。但是，我遇到了回调函数的问题，这可能只是一个基本的jquery问题，而不是同位素问题。

我在同一页面上有多个同位素容器，每个容器都有相同的类别（＆＃39; .products＆＃39;）。它们必须被分解成不同的容器，因为它们有不同的部分，并且它们必须具有相同的类（容器是在wordpress中动态创建的）。它们全部由同一组过滤器控制。所有这一切都很好。但是，我现在要添加一个＆＃34;没有找到结果＆＃34;当特定的过滤器组合没有结果时的消息。

我添加了一个＆＃39; .noresults＆＃39;项目到每个容器的开头，不透明度为0。然后，我试图展示＆＃39; .noresults＆＃39; div如果其容器没有其他项目。像这样：

$container = $('.products');

$container.isotope({ 
    filter: comboFilter,
    onLayout: function() {
         if ( $('.products').length < 2 ) { 
             $(this).find('.noresults').addClass('showme'); 
         } else {
             $(this).find('.noresults').removeClass('showme');
         }
    }
});

不幸的是，它显示了所有.noresults项目，而不仅仅是.products容器中的空白项目。因此，一旦ANY容器为空，它就会将该类添加到ALL .noresults divs。

如何仅定位空容器中的.noresults div？

更新：我使用下面第一个答案中的代码制作了一个代码笔，这样您就可以看到发生了什么：http://codepen.io/anon/pen/lKuxa

Answer 1

$（'。products'）。length表示匹配结果的数量。它将始终返回文档中.products容器的编号。您应该使用$（this）.children（）。length作为条件。尝试这样实现：

onLayout: function($ele){
    var $this = $(this),visibleItemNum = $this.children().length - $this.children("[class*=isotope-hidden]").length;  //container reference

    if(visibleItemNum<3){
        $this.find(".noresults").addClass("showme");
    }else{
        $this.find(".noresults").removeClass("showme");
    }
}

同位素过滤回调 - 当多个容器具有相同的类时如何定位

1 个答案: