jquery在获取ajax时点击更新项目计数

Question

我创建了一个 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 );

一切都很好，感谢您的帮助。

Answer 1

解析.totalleft中的text()得到一个整数值

var totals = parseInt(jQuery('.totalleft').text());

如果你的计算是正确的，你应该得到正确的数字

编辑

因为ajax 是async，所以您要在ajax 完成之前重新更新.totalleft 的值。

确保您在 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 可能不再存在