jQuery"加载更多的帖子”;隐藏按钮如果最后一个帖子
jQuery "load more posts" hide button if last post
我正在使用jQuery为Wordpress循环创建"加载更多帖子"效果。由于循环已经加载了所有的帖子,并且它们只是与jQuery一起出现,所以当我到达最后一个时,我无法隐藏"加载更多"按钮。
$(document).ready(function () {
$(".post").addClass("hide");
total = $("#allpost .post").size();
x = 3;
$('.loadmore').click(function () {
//y = x;
$(total);
$(".post").removeClass("hide");
$(".post:gt("+x+")").addClass("hide");
x = x + 1;
});
});
我的环路
<div id="all-posts">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args= array(
'posts_per_page' => 100,
'paged' => $paged
);
query_posts($args); ?> <!-- posts per page -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $postcount++;
$new_class = ( ($postcount % 2) == 0 ) ? "even" : "odd"; ?>
<div <?php post_class($new_class) ?> id="post-<?php the_ID(); ?>">
<div class="post_image">
<a href="<?php echo the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail('custom-size'); // post thumbnail
}?>
<button class="blog_button">Vaata</button></a>
</div>
<div class="post_tekst">
<div class="lisakast">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
</div>
</div><!-- odd / even div -->
<?php endwhile; endif; ?>
<div class="loadmore">Lae juurde</div>
</div><!-- all posts -->
JSFiddle:https://jsfiddle.net/hd4603gj/7/
这是如何实现的?
您只需要在JS代码中添加一个额外的验证。
$(document).ready(function () {
$(".post").addClass("hide");
total = $( ".post" ).length;
x = 3;
$('.loadmore').click(function () {
//y = x;
$(total);
$(".post").removeClass("hide");
$(".post:gt("+x+")").addClass("hide");
x++;
if($(".post.hide").length == 0){
$('.loadmore').addClass('hide');
}
});
当所有帖子都可见时,隐藏"加载更多"按钮
您可以使用以下代码:
$(document).ready(function () {
$(".post").addClass("hide");
total = $( ".post" ).length;
x = 3;
$('.loadmore').click(function () {
//y = x;
$(total);
$(".post").removeClass("hide");
$(".post:gt("+x+")").addClass("hide");
x++;
if(x >= total){
$( ".loadmore" ).hide();
}
});
});
.length()
功能:
当前匹配的元素数。.size()
方法将返回相同的值。要获取有关.length()
的更多信息:请单击
演示:Fiddle
相关文章:
- 表追加而不附加最后一个元素
- 无法在Ionic select中预先选择最后一个选项
- 为什么画布形状只在3个画布中的最后一个画布上渲染
- Jquery append oly获取循环Rails中的最后一个elemen
- 如何创建更好的方式来维护基于我的代码访问的最后一个页面
- dataTables-如何自定义分页类型以显示最后一个页码后面的省略号,
- 多维关联数组的最后一个索引
- 无法获取vis.js最后一个或第一个选定的网络节点
- 循环以检查数组中的最后一个图像
- 从输入值中删除最后一个单词
- 尝试使用Javascript正则表达式来获取“&"分隔文本,无论它是否's是最后一个值
- 为什么这个正则表达式不't匹配最后一个字母数字字符
- 引导程序转盘隐藏第一个和最后一个控件
- jQuery"加载更多的帖子”;隐藏按钮如果最后一个帖子
- 到达最后一个元素时隐藏下一步按钮
- jQuery:隐藏按钮,直到选择最后一个下拉列表
- 如果有超过 3 个孩子,则隐藏最后一个孩子
- 如何隐藏导航的左和右基于第一个和最后一个
- (HTML / JS)添加“,“在第二个最后一个字串和隐藏"&"如果字符串中有一个单词
- 如果下一个元素是最后一个元素隐藏另一个元素