Question

我终于伸出援手了。我一直试图在我的同位素图像库中显示一个没有结果的消息，现在已经有一个星期了，只有一点运气。我有一个例子在一点上工作，但是在动画完成之前消息不会隐藏，所以它看起来并不好看。

当然有人有解决方案。

如果有人能够帮助我，我将不胜感激。我有测试网站，我将在一秒钟内链接到这里。

现在这是我的同位素配置文件的前半部分。我将'.message-div'放在我的#isotopegallery div底部，css应用'display：none;。'

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');
                }
             })
        });
    });
});

Answer 1

有一个简单的解决方法来实现＆＃34;没有结果＆＃34;信息。考虑＆＃34; .photo＆＃34;作为itemSelector的类。同位素只是简单地附着＆＃34; .isotope-hidden＆＃34;对于div-container，如果它与过滤器不匹配，则这些div的数量等于所有同位素项的总和，如果没有结果＆＃34;。易：

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

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

1 个答案: