时间戳

首页 > 解决方案 > 过滤问题 - 不显示帖子

jquery - 过滤问题 - 不显示帖子

问题描述

我创建了一个过滤系统，可以过滤不同的帖子类型。如果选择时没有显示任何帖子，我想显示“无帖子”。但是目前，它显示在每个过滤器上。我创建了以下代码笔：

https://codepen.io/scottYg55/pen/OexpgR

此脚本有效，但无法单击：-

var allHidden = $('.tile').filter(':visible').length === 0;

if($('.tile:visible').length===0){
  $('.hideme').show();
}
else{
  $('.hideme').hide();
}

全点击功能

jQuery(function ($) {
    var allHidden = $('.tile').filter(':visible').length === 0;
    var selectedClass = "";
    $(".blogfilter a").on('click', function(){
    $(".blogfilter a").removeClass("filter-selected");
    $(".tiles .tile").addClass("two-tile");
    $(this).addClass("filter-selected");    
    selectedClass = $(this).attr("data-rel"); 
    $("#blog-posts").fadeTo(100, 0.1);  
    $("#blog-posts .tile").not("."+selectedClass).fadeOut().removeClass('scale-anm');   

    setTimeout(function() {
        $("."+selectedClass).fadeIn().addClass('scale-anm');
            $("#blog-posts").fadeTo(300, 1);    
        }, 300);    
    });
});

标签： jqueryhtmlcss

解决方案

<div class="hideme" style="display:none;">No posts</div>

脚本是

jQuery(function ($) {


    var selectedClass = "";
    $(".blogfilter a").on('click', function(){
        var datarel = $(this).data("rel");
        var hasclass = $( ".tiles .tile" ).hasClass( datarel );

        (hasclass === false) ? $(".hideme").css("display","block") :  $(".hideme").css("display","none");               


        $(".blogfilter a").removeClass("filter-selected");
        $(".tiles .tile").addClass("two-tile");
        $(this).addClass("filter-selected");    
        selectedClass = $(this).attr("data-rel"); 
        $("#blog-posts").fadeTo(100, 0.1);  
        $("#blog-posts .tile").not("."+selectedClass).fadeOut().removeClass('scale-anm');       
        setTimeout(function() {
            $("."+selectedClass).fadeIn().addClass('scale-anm');
            $("#blog-posts").fadeTo(300, 1);    
        }, 300); 


    });
});

推荐阅读