如果没有什么可装载的，隐藏更多的装载

Question

I added a load more button with the plugin "easy load more" ( https://wordpress.org/plugins/easy-load-more/ ). The button is working great except that it will still show up even if there are no more posts to display. I want it to not show up if there is nothing left to load. Does anyone have any suggestions? Thanks in advance.

frontend.js

 ;(function ($) { $(document).ready(function() { $('.elm-button').on('click', function (e) { e.preventDefault(); var $that = $(this), url = $that.attr('data-href'), nextPage = parseInt($that.attr('data-page'), 10) + 1, maxPages = parseInt($that.attr('data-max-pages'), 10); $that.addClass('is-loading'); if (url.indexOf('?') > 0) { url += '&'; } else { url += '?'; } url += 'paged=' + nextPage; $.ajax({ type : 'POST', url : url, dataType: 'text' }).done(function (data) { $that.removeClass('is-loading'); if ($(elm_button_vars.wrapper).length) { $(elm_button_vars.wrapper).append($($.parseHTML(data)).find(elm_button_vars.wrapper).addBack(elm_button_vars.wrapper).html()); } else { console.log('Please update Easy Load More settings with post list wrapper selector.'); } if ( nextPage == maxPages ) { $that.remove(); } else { $that.attr('data-page', nextPage); } }).fail(function () { console.log('Ajax failed. Navigating to ' + url + '.'); window.location.href = url; }); return false; }); }); }(jQuery)); 

and my front-page.php

 <?php /* * Template Name: */ get_header(); get_template_part ('inc/carousel'); $the_query = new WP_Query( [ 'posts_per_page' => 14, 'paged' => get_query_var('paged', 1) ] ); if ( $the_query->have_posts() ) { ?> <div id="ajax"> <?php $i = 0; while ( $the_query->have_posts() ) { $the_query->the_post(); if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> <article <?php post_class( 'col-md-12' ); ?>> <?php the_post_thumbnail('large-thumbnail'); ?> <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p> <?php get_template_part( 'share-buttons' ); ?> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?> </article><?php } else { // Small posts ?> <article <?php post_class( 'col-md-4' ); ?>> <?php the_post_thumbnail( 'medium-thumbnail' ); ?> <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p> <?php get_template_part( 'share-buttons' ); ?> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?> </article> <?php } $i++; }?> </div> <?php if(get_query_var('paged') < $the_query->max_num_pages) { load_more_button(); } } elseif (!get_query_var('paged') || get_query_var('paged') == '1') { echo '<p>Sorry, no posts matched your criteria.</p>'; } wp_reset_postdata(); get_footer(); 

screenshot

Answer 1

In .done() you need to check if you have received any more data as a result of ajax call. If not then do not show up. Currently you don't have that check defined hence the behavior.

.done(function (data) {

    $that.removeClass('is-loading');

   // CHECK if data contains something?
   if(YES) {
       if ($(elm_button_vars.wrapper).length) {
          $(elm_button_vars.wrapper).append($($.parseHTML(data)).find(elm_button_vars.wrapper).addBack(elm_button_vars.wrapper).html());
       }
       else {
          console.log('Please update Easy Load More settings with post list wrapper selector.');
       }

      if ( nextPage == maxPages ) {
          $that.remove();
      }
      else {
         $that.attr('data-page', nextPage);
      }
   }
})

Answer 2

try this code.

updated answer

                <?php
        /*
         * Template Name:
         */

        get_header();
        get_template_part ('inc/carousel');

        $posts_per_page= 4;

        $the_query = new WP_Query( [
            'posts_per_page' => $posts_per_page,
            'paged' => get_query_var('paged', 1)
        ] );

        if ( $the_query->have_posts() ) { ?>
            <div id="ajax">
            <?php
            $i = 0;
            while ( $the_query->have_posts() ) { $the_query->the_post();

                $count = $the_query->post_count;

                echo $count;

                if($count<$posts_per_page){
                    echo "<style>.elm-button{display:none;}</style>";
                }

                if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
                <article <?php post_class( 'col-md-12' ); ?>>
                    <?php the_post_thumbnail('large-thumbnail'); ?>
                    <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
                    <?php get_template_part( 'share-buttons' ); ?>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                    <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
                    </article><?php

                } else { // Small posts ?>

                    <article <?php post_class( 'col-md-4' ); ?>>
                        <?php the_post_thumbnail( 'medium-thumbnail' ); ?>
                        <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
                        <?php get_template_part( 'share-buttons' ); ?>
                        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                        <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
                    </article>
                    <?php
                }
                $i++;
            }?>
            </div>
            <?php if(get_query_var('paged') < $the_query->max_num_pages) {
               load_more_button();
            }
        }
        elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
            echo '<p>Sorry, no posts matched your criteria.</p>';
        }
        wp_reset_postdata();
        get_footer();