如果最后一个帖子，jQuery“加载更多帖子”隐藏按钮答案

【问题标题】：jQuery "load more posts" hide button if last post如果最后一个帖子，jQuery“加载更多帖子”隐藏按钮
【发布时间】：2016-07-16 20:02:09
【问题描述】：

我正在使用 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/

如何做到这一点？

【问题讨论】：

jsfiddle.net/hd4603gj/8 试试这个希望有帮助:)
Why not AJAX?

标签： javascript php jquery wordpress

【解决方案1】：

您只需要在您的 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');
    }

    });

当所有帖子都可见时，隐藏“加载更多”按钮

【讨论】：

此选项无法正常工作？我误会了什么？

【解决方案2】：

您可以使用以下代码：

$(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()的信息：Click

演示：Fiddle

【讨论】：