jQuery "最後の投稿の場合はボタンを隠す"

Question

jQueryを使用してWordpressループの "more posts"エフェクトを作成しています。 ループにはすでにロードされているすべてのポストがあり、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/はどのようにこれを達成することができましたか？

Answer 1

次のコードを使用することができます

$(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

デモ：[？なぜ、AJAXない] Fiddle

Answer 2

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'); 
    } 

    }); 

は、その後、ボタン "より多くの負荷を" 隠す