组合过滤器的同位素无结果消息答案

【问题标题】：Isotope No Results Message for Combination Filters组合过滤器的同位素无结果消息
【发布时间】：2014-10-19 05:32:27
【问题描述】：

我终于要寻求帮助了。一个星期以来，我一直试图在我的同位素图像库中显示没有结果的消息，但运气不佳。我曾经有一个例子在工作，但是在动画完成之前消息不会隐藏，所以它看起来一点也不好看。

肯定有人有解决办法。

如果有人能够帮助我，我将不胜感激。我有一个测试站点，稍后我会链接到这里。

现在这里是我的同位素配置文件的前半部分。我将“.message-div”放在我的#isotopegallery div 的底部，css 应用“显示：无；。”

jQuery(window).load(function() {

    var $container = $('#isotopegallery').imagesLoaded(function() {
        $container.isotope({
            itemSelector: '.photo',
            masonry: {
                columnWidth: 161,
                gutter: 10
            },
            transitionDuration: '0.6s'
        });

        // Filters
        //
        var filters = {};
        $('#isotopefilters').on('click', '.menu-item', function() {

            var $this = $(this);
            // get group key
            var $buttonGroup = $this.parents('.filter-title');
            var filterGroup = $buttonGroup.attr('data-filter-group');
            // set filter for group
            filters[filterGroup] = $this.attr('data-filter');
            // combine filters
            var filterValue = '';
            for (var prop in filters) {
                filterValue += filters[prop];
            }

            $container.isotope({filter: filterValue});

            // Possibility
            $container.isotope( 'on', 'layoutComplete',
              function( iso, laidOutItems ) {
                if ( laidOutItems < 1 ) {
                $('.message-div').fadeIn('slow');
                } else {
                $('.message-div').fadeOut('fast');
                }
             })
        });
    });
});

【问题讨论】：

标签： wordpress filter jquery-isotope nextgen-gallery

【解决方案1】：

有一个简单的解决方法可以实现“无结果”消息。将“.photo”视为 itemSelector 的类。由于同位素只是简单地将“.isotope-hidden”附加到 div-container，如果它与过滤器不匹配，因此在“无结果”的情况下，这些 div 的数量等于所有同位素项目的总数。简单：

if($(".isotope-hidden").length == $(".photo").length) {
    $("#mynoresults").show();
    }

【讨论】：