如果没有任何东西要加载,请隐藏更多负载

时间:2016-12-23 03:27:18

标签: javascript jquery ajax wordpress

我添加了一个带有插件的加载按钮"轻松加载更多" (https://wordpress.org/plugins/easy-load-more/)。该按钮工作正常,但即使没有更多帖子显示,它仍会显示。如果没有任何东西可以加载,我希望它不显示。有没有人有什么建议?提前谢谢。

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




和我的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();
&#13;
&#13;
&#13;

截图 enter image description here

2 个答案:

答案 0 :(得分:0)

.done()中,您需要检查是否因为ajax调用而收到了更多数据。如果没有,则不要show。目前,您没有定义该检查,因此行为。

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

答案 1 :(得分:0)

试试这段代码。

更新回答

                <?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();