我创建了一个过滤系统,可以过滤不同的帖子类型。如果选择后未显示任何帖子,我想显示“无帖子”。但是目前,它显示在每个过滤器上。我创建了以下代码笔:
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);
});
});
答案 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);
});
});