当 AJAX 没有更多要显示的帖子时显示"Show Less"按钮

Question

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

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

我怎么能修改我当前的脚本来做到这一点？

以下是代码

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

以下代码来自我的功能文件

wp_enqueue_script( 'custom_js', get_template_directory_uri(). '/js/custom.js', array( 'jquery'), '', true ); wp_localize_script( 'custom_js', 'ajax_posts', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'noposts' => __('No older posts found', 'enzyme-communications'), ));
function more_post_ajax(){
$ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 4;
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'casestudies',
'posts_per_page' => $ppp,
'cat' => 0,
'paged'    => $page,
);
$loop = new WP_Query($args);
$rows = get_field('repeater_field_name');
if($rows)
{ $image = get_sub_field('image'); }
$out = '';
if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> . 
the_post();
$out .= ' <div class="case-more-container">
<div class="case-more-toggle"><img src="'.get_the_post_thumbnail_url().'"> . 
<h3>'.get_the_title().'</h3></div>
</div>
';

endwhile;
endif;
wp_reset_postdata();
die($out);
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

以下是与此相关的custom.js

$(document).ready(function(){
var ppp = 4; // Post per page
var cat = 0;
var pageNumber = 1;

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($data);
$("#more_posts").attr("disabled",false);
} else{
$("#more_posts").attr("disabled",true);
}
},
error : function(jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
return false;
}
$("#more_posts").on("click",function(){ // When btn is pressed.
$("#more_posts").attr("disabled",true); // Disable the button, temp.
load_posts();
});
});

非常感谢提前提供的任何帮助：(

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