[英]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()
更多信息: 單擊
演示: 小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.