【问题标题】: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) 复制到超时之前

标签: jquery html css


【解决方案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!
  • 这对我来说意义重大:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-25
  • 1970-01-01
  • 1970-01-01
  • 2014-11-27
相关资源
最近更新 更多