如何在显示所有帖子时隐藏“加载更多”按钮

huangapple
go评论153阅读模式
英文:

How to hide the Load More button when all posts are displayed

问题

已实现使用AJAX动态加载帖子。代码有效，帖子正常显示。现在的问题是，当所有帖子都显示后，我需要隐藏按钮，但我不知道如何做到。我该如何获取帖子数量并将其传递给JavaScript以隐藏按钮？如何实现这一点？

  1. let currentPage = 1;
  2. jQuery(document).ready(function($) {
  3.   $('#load-more').on('click', function(e) {
  4.     e.preventDefault();
  5.     currentPage++;
  6.     $.ajax({
  7.       type: 'POST',
  8.       url: '/wp-admin/admin-ajax.php',
  9.       dataType: 'json',
  10.       data: {
  11.         action: 'load_more',
  12.         paged: currentPage,
  13.       },
  14.       success: function(res) {
  15.         $('.news-дist').append(res);
  16.       }
  17.     });
  18.   });
  19. });
  1. function load_more() {
  2.     $query = new WP_Query([
  3.         'post_type' => 'post',
  4.         'posts_per_page' => 6,
  5.         'orderby' => 'date',
  6.         'order' => 'DESC',
  7.         'paged' => $_POST['paged'],
  8.     ]);
  10.     $response = '';
  12.     if ($query->have_posts()) {
  13.         while ($query->have_posts()) : $query->the_post();
  14.             $img_url = get_the_post_thumbnail_url($query->post->ID);
  15.             $post_title = get_the_title($query->post_title);
  16.             $post_author = get_the_author($query->post_author);
  17.             $post_date = get_the_date('d F Y');
  18.             $post_permalink = get_permalink($query->post->ID);
  20.             echo '<li>
  21.                   <a href="' . $post_permalink . '">
  22.                     <div class="latest-news__image">
  23.                       <img src="' . $img_url . '" alt="' . $post_title . '">
  24.                     </div>
  25.                     <h4>' . $post_title . '</h4>
  26.                     <div class="post-credentials">
  27.                       <p class="post-author">By ' . $post_author . '</p>
  28.                       <p class="post-date">' . $post_date . '</p>
  29.                     </div>
  30.                   </a>
  31.                 </li> ';
  32.         endwhile;
  33.     } else {
  34.         $response = 'empty';
  35.     }
  37.     echo $response;
  38.     exit;
  39. }
  41. add_action('wp_ajax_load_more', 'load_more');
  42. add_action('wp_ajax_nopriv_load_more', 'load_more');
英文:

Implemented dynamic loading of posts using AJAX. The code works and the posts come as they should. Now the problem is that I need to hide the button when all posts have been displayed, but I don't understand how to do it. How can I get the number of posts and pass that to js to hide the button. How can I implement it?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let currentPage = 1;
  2. jQuery(document).ready(function($) {
  3.   $(&#39;#load-more&#39;).on(&#39;click&#39;, function(e) {
  4.     e.preventDefault();
  5.     currentPage++;
  6.     $.ajax({
  7.       type: &#39;POST&#39;,
  8.       url: &#39;/wp-admin/admin-ajax.php&#39;,
  9.       dataType: &#39;json&#39;,
  10.       data: {
  11.         action: &#39;load_more&#39;,
  12.         paged: currentPage,
  13.       },
  14.       success: function(res) {
  15.         $(&#39;.news-дist&#39;).append(res);
  16.       }
  17.     });
  18.   });
  19. });

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function load_more()
  2. {
  3.     $query = new WP_Query([
  4.         &#39;post_type&#39; =&gt; &#39;post&#39;,
  5.         &#39;posts_per_page&#39; =&gt; 6,
  6.         &#39;orderby&#39; =&gt; &#39;date&#39;,
  7.         &#39;order&#39; =&gt; &#39;DESC&#39;,
  8.         &#39;paged&#39; =&gt; $_POST[&#39;paged&#39;],
  9.     ]);
  11.     $response = &#39;&#39;;
  13.     if ($query-&gt;have_posts()) {
  14.         while ($query-&gt;have_posts()) : $query-&gt;the_post();
  15.             $img_url = get_the_post_thumbnail_url($query-&gt;post-&gt;ID);
  16.             $post_title = get_the_title($query-&gt;post_title);
  17.             $post_author = get_the_author($query-&gt;post_author);
  18.             $post_date = get_the_date(&#39;d F Y&#39;);
  19.             $post_permalink = get_permalink($query-&gt;post-&gt;ID);
  21.             echo &#39;&lt;li&gt;
  22. 	          &lt;a href=&quot;&#39; . $post_permalink . &#39;&quot;&gt;
  23. 	            &lt;div class=&quot;latest-news__image&quot;&gt;
  24.                 &lt;img src=&quot;&#39; . $img_url . &#39;&quot; alt=&quot;&#39; . $post_title . &#39;&quot;&gt;
  25.                 &lt;/div&gt;
  26.                 &lt;h4&gt;&#39; . $post_title . &#39;&lt;/h4&gt;
  27.                  &lt;div class=&quot;post-credentials&quot;&gt;
  28.                  &lt;p class=&quot;post-author&quot;&gt;By &#39; . $post_author . &#39;&lt;/p&gt;
  29.                  &lt;p class=&quot;post-date&quot;&gt;&#39; . $post_date . &#39;&lt;/p&gt;
  30.                   &lt;/div&gt;
  31. 	           &lt;/a&gt;
  32. 		    &lt;/li&gt; &#39;;
  33.         endwhile;
  34.     } else {
  35.         $response = &#39;empty&#39;;
  36.     }
  38.     echo $response;
  39.     exit;
  40. }
  42. add_action(&#39;wp_ajax_load_more&#39;, &#39;load_more&#39;);
  43. add_action(&#39;wp_ajax_nopriv_load_more&#39;, &#39;load_more&#39;);

<!-- end snippet -->

答案1

得分: 1

在Ajax响应中，您需要以JSON格式传递最大页数，然后如果当前页面大于或等于最大页面时，隐藏按钮。

js:

  1. (function ($) {
  2.   let currentPage = 1;
  3.   $(document).ready(function () {
  4.     $("#load-more").on("click", function (e) {
  5.       e.preventDefault();
  6.       currentPage++;
  8.       $.ajax({
  9.         type: "POST",
  10.         url: "/wp-admin/admin-ajax.php",
  11.         dataType: "json",
  12.         data: {
  13.           action: "load_more",
  14.           paged: currentPage,
  15.         },
  16.         success: function (res) {
  17.           if (currentPage >= res.max) {
  18.             $("#load-more").hide();
  19.           }
  20.           $(".news-list").append(res.html);
  21.         },
  22.       });
  23.     });
  24.   });
  25. })(jQuery);

Ajax回调:

  1. function load_more()
  2. {
  3.     $query = new WP_Query([
  4.         'post_type'      => 'post',
  5.         'posts_per_page' => 2,
  6.         'orderby'        => 'date',
  7.         'order'          => 'DESC',
  8.         'paged'          => $_POST['paged'],
  9.     ]);
  11.     $response  = '';
  12.     $max_pages = $query->max_num_pages;
  14.     if ($query->have_posts()) {
  15.         while ($query->have_posts()): $query->the_post();
  16.             $img_url        = get_the_post_thumbnail_url($query->post->ID);
  17.             $post_title     = get_the_title($query->post_title);
  18.             $post_author    = get_the_author($query->post_author);
  19.             $post_date      = get_the_date('d F Y');
  20.             $post_permalink = get_permalink($query->post->ID);
  22.             $response .= ' <a href="' . $post_permalink . '">
  23.                               <div class="latest-news__image">
  24.                               <img src="' . $img_url . '" alt="' . $post_title . '">
  25.                               </div>
  26.                               <h4>' . $post_title . '</h4>
  27.                                 <div class="post-credentials">
  28.                                 <p class="post-author">By ' . $post_author . '</p>
  29.                                 <p class="post-date">' . $post_date . '</p>
  30.                                 </div>
  31.                           </a> ';
  32.         endwhile;
  33.     } else {
  34.         $response = '';
  35.     }
  37.     $result = [
  38.         'max'  => $max_pages,
  39.         'html' => $response,
  40.     ];
  42.     echo json_encode($result);
  43.     exit;
  44. }
  45. add_action('wp_ajax_load_more', 'load_more');
  46. add_action('wp_ajax_nopriv_load_more', 'load_more');

如您所要求的，这是翻译好的内容，没有其他信息。

英文:

In the ajax response, you need to pass the max pages in JSON format. Then hide the button if the current page is greater or equal to the max page.

js:

  1. (function ($) {
  2.   let currentPage = 1;
  3.   $(document).ready(function () {
  4.     $(&quot;#load-more&quot;).on(&quot;click&quot;, function (e) {
  5.       e.preventDefault();
  6.       currentPage++;
  8.       $.ajax({
  9.         type: &quot;POST&quot;,
  10.         url: &quot;/wp-admin/admin-ajax.php&quot;,
  11.         dataType: &quot;json&quot;,
  12.         data: {
  13.           action: &quot;load_more&quot;,
  14.           paged: currentPage,
  15.         },
  16.         success: function (res) {
  17.           if (currentPage &gt;= res.max) {
  18.             $(&quot;#load-more&quot;).hide();
  19.           }
  20.           $(&quot;.news-list&quot;).append(res.html);
  21.         },
  22.       });
  23.     });
  24.   });
  25. })(jQuery);

Ajax callback:

  1. function load_more()
  2. {
  3.     $query = new WP_Query([
  4.         &#39;post_type&#39;      =&gt; &#39;post&#39;,
  5.         &#39;posts_per_page&#39; =&gt; 2,
  6.         &#39;orderby&#39;        =&gt; &#39;date&#39;,
  7.         &#39;order&#39;          =&gt; &#39;DESC&#39;,
  8.         &#39;paged&#39;          =&gt; $_POST[&#39;paged&#39;],
  9.     ]);
  11.     $response  = &#39;&#39;;
  12.     $max_pages = $query-&gt;max_num_pages;
  14.     if ($query-&gt;have_posts()) {
  15.         while ($query-&gt;have_posts()): $query-&gt;the_post();
  16.             $img_url        = get_the_post_thumbnail_url($query-&gt;post-&gt;ID);
  17.             $post_title     = get_the_title($query-&gt;post_title);
  18.             $post_author    = get_the_author($query-&gt;post_author);
  19.             $post_date      = get_the_date(&#39;d F Y&#39;);
  20.             $post_permalink = get_permalink($query-&gt;post-&gt;ID);
  22.             $response .= &#39; &lt;a href=&quot;&#39; . $post_permalink . &#39;&quot;&gt;
  23.                               &lt;div class=&quot;latest-news__image&quot;&gt;
  24.                               &lt;img src=&quot;&#39; . $img_url . &#39;&quot; alt=&quot;&#39; . $post_title . &#39;&quot;&gt;
  25.                               &lt;/div&gt;
  26.                               &lt;h4&gt;&#39; . $post_title . &#39;&lt;/h4&gt;
  27.                                 &lt;div class=&quot;post-credentials&quot;&gt;
  28.                                 &lt;p class=&quot;post-author&quot;&gt;By &#39; . $post_author . &#39;&lt;/p&gt;
  29.                                 &lt;p class=&quot;post-date&quot;&gt;&#39; . $post_date . &#39;&lt;/p&gt;
  30.                                 &lt;/div&gt;
  31.                           &lt;/a&gt; &#39;;
  32.         endwhile;
  33.     } else {
  34.         $response = &#39;&#39;;
  35.     }
  37.     $result = [
  38.         &#39;max&#39;  =&gt; $max_pages,
  39.         &#39;html&#39; =&gt; $response,
  40.     ];
  42.     echo json_encode($result);
  43.     exit;
  44. }
  45. add_action(&#39;wp_ajax_load_more&#39;, &#39;load_more&#39;);
  46. add_action(&#39;wp_ajax_nopriv_load_more&#39;, &#39;load_more&#39;);

huangapple
  • 本文由 发表于 2023年2月27日 03:24:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/75574484.html
  • ajax
  • php
  • wordpress
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定