我创建了一个ajax加载更多按钮来从我的数据库中获取更多数据,这一切都正常。我现在正在尝试进行计数,因此该按钮显示要显示的结果数量。这是我单击按钮时触发的jQuery代码:
jQuery(document).ready(function(){
jQuery(document).on('click','.show_more',function(){
var ID = jQuery(this).attr('id');
var count = jQuery(".singleproduct").length;
var totals = jQuery('.totalleft').text();
var finaltotal = totals - count;
//jQuery('.show_more').hide();
jQuery('.loding').show();
jQuery.ajax({
type:'POST',
async: true,
crossDomain : true,
url:'example.com/data.php',
data:'count='+count,
success:function(html){
//jQuery('#show_more_main'+ID).remove();
jQuery('.retailitems').append(html);
jQuery('html, body').animate({scrollTop: jQuery(".site-info").offset().top}, 1000);
}
});
jQuery( ".totalleft" ).replaceWith( finaltotal );
});
});
这是按钮的代码:
<span id="<?php echo $result['id']; ?>" class="show_more" title="Load more posts">Load <span class="totalleft"><?php echo $loadmore;?></span> more</span>
首次点击时,按钮会更新并显示正确的剩余结果。第二次点击时,新闻结果会填充,但计数保持不变。
我上面的订单是否正确?
由于
修改
所以我发现了这个问题。计算是正确的,但是当更新按钮上的计数时,我实际上正在删除“totalleft”类:
jQuery( ".totalleft" ).replaceWith( finaltotal );
所以我用以下代替:
jQuery( ".totalleft" ).text( finaltotal );
一切都很好,感谢所有的帮助。
答案 0 :(得分:1)
解析text()
中的.totalleft
以获取整数值
var totals = parseInt(jQuery('.totalleft').text());
如果你的计算是正确的,你应该得到正确的数字
修改强>
因为ajax
为async
,您需要在.totalleft
完成之前重新更新ajax
的值。
确保您在ajax
回调中执行此操作:
success:function(html){
//jQuery('#show_more_main'+ID).remove();
jQuery('.retailitems').append(html);
jQuery('html, body').animate({scrollTop: jQuery(".site-info").offset().top}, 1000);
jQuery( ".totalleft" ).replaceWith( finaltotal );
}
最后,我不确定var count = jQuery(".singleproduct").length;
是什么,因此请确保在减法之前和之后通过控制台记录确保您期望的值是正确的
编辑#2
var count = jQuery(`.singleproduct`).length;
console.log('count :' + count);
var totals = jQuery('.totalleft').text();
console.log('totals :' + totals);
你在上面的日志上得到了数字吗?如果没有,那么您可能会使用ajax
请求替换html的某些部分,singleproduct
或totalleft
可能不再存在