过滤问题-不显示帖子

时间:2019-06-27 09:01:50

标签: jquery html css

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

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

1 个答案:

答案 0 :(得分:1)

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


    });
});