Question

我在WordPress页面上运行了一个AJAX“显示更多帖子”脚本。

唯一的是，当我单击“显示更多”并到达末尾时，我希望按钮更改并说“显示较少”，然后关闭所有显示的AJAX。

我该如何更改当前脚本来做到这一点？

下面是代码

resp.data.docs

下面的代码来自我的函数文件

this.setState({
  docs: resp.data.docs,
  username: resp.data.username,
  userid: resp.data.userid,
  loading: false
});

下面是与此相关的custom.js

<div id="work" class="case-studies">
    <h2>
        Case studies
    </h2>
    <div class="case-study-squares">
     <div id="ajax-posts" class="row">
     <?php
$args = array(
  'post_type'   => 'casestudies',
  'post_status' => 'publish',
 );

$casestudies = new WP_Query( $args );
if( $casestudies->have_posts() ) :
?>


    <?php
        $postsPerPage = 4;
        $args = array(
                'post_type' => 'casestudies',
                'posts_per_page' => $postsPerPage,
                'cat' => 0
        );

        $loop = new WP_Query($args);

        while ($loop->have_posts()) : $loop->the_post();

    ?>
 <div class="case-open-container">

  <div class="case-toggle"><?php the_post_thumbnail('large'); ?><h3><?php echo 
the_title(); ?></h3></div>
         </div>

     <?php
            endwhile;
    wp_reset_postdata();
     ?>


  </div>
<?php
else :
  esc_html_e( 'No case studies posted yet!', 'text-domain' );
endif;
?>

</div>
</div>
<div id="more_posts" class="view-more">
<h3>
    View more work 
</h3><p class="down-arrow">
    &#x25BC;
    </p>
</div>

非常感谢事先提供的任何帮助：）

Answer 1

我希望这会对您有所帮助！

尝试一下

$(document).ready(function(){
var ppp = 4; // Post per page
var cat = 0;
var pageNumber = 1;
$("#more_posts").text("Show More");    

function load_posts(){
pageNumber++;
var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + 
'&action=more_post_ajax';
$.ajax({
    type: "POST",
    dataType: "html",
    url: ajax_posts.ajaxurl,
    data: str,
    success: function(data){
        var $data = $(data);
        if($data.length){
            $("#ajax-posts").append("<div id='ajax-posts-'" + pageNumber + ">" + $data + "</div>");
            $("#more_posts").text("Show More");
            $("#more_posts").attr("disabled",false);
        } else{
            //If there are no more posts
            $("#more_posts").text("Show Less");
            $("#more_posts").attr("disabled",true);
        }
    },
    error : function(jqXHR, textStatus, errorThrown) {
        $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
    }

});
return false;
}

function less_posts(){
    $("#ajax-posts-" + pageNumber).remove();
    pageNumber--;
}

$("#more_posts").on("click",function(){ // When btn is pressed.
$("#more_posts").attr("disabled",true); // Disable the button, temp.
       if($("#more_posts").text == "Show More")
       {
            load_posts();
       }
       else if($("#more_posts").text == "Show Less")
       {
            less_posts();
       }
 });
 });

谢谢;）

Answer 2

我不知道您的代码如何工作，但是我的脚本有助于更改文本。

选中此项并尝试使用您的代码，希望对您有所帮助。

jQuery(document).ready(function(){
jQuery("#more_posts").on("click",function(){ // When btn is pressed.
jQuery(this).toggleClass("less_show");
if(jQuery(this).hasClass("less_show")){
        jQuery("#more_posts h3").text('View less work ');
    }
    else{
        jQuery("#more_posts h3").text('View more work ');
    }
});
});

当AJAX没有更多帖子可显示时，显示“显示较少”按钮

2 个答案: