过滤问题 - 不显示帖子

Posted 2023-05-08

【中文标题】过滤问题 - 不显示帖子

【英文标题】：Filtering issue - showing no posts

【发布时间】：2019-11-09 06:27:57

【问题描述】：

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

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

【问题讨论】：

为什么不var allHidden = $('.tile:visible').length===0; $('.hideme').toggle(allHidden)

点击函数在哪里调用这个？

什么点击功能。您还没有在此处发布任何点击功能。请点击edit，然后点击[<>]，并在此处生成minimal reproducible example

我添加了点击功能，完整功能请看codepen.io/scottYg55/pen/OexpgR

目前var allHidden = $('.tile').filter(':visible').length === 0; 仅在页面加载时执行。例如，您需要将var allHidden = $('.tile:visible').length===0; $('.hideme').toggle(allHidden) 复制到超时之前

【参考方案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); 


    );
);

【讨论】：

哇，就是这样！！非常感谢Vinee！

这对我来说意义重大:)