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

Question

I have created a ajax load more button to grab more data from my database, which all works fine. I am now trying to do a count, so the button displays how many results are left to display. Here is my jQuery code that is fired when the button is clicked:

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

And here is the code for the button:

<span id="<?php echo $result['id']; ?>" class="show_more" title="Load more posts">Load <span class="totalleft"><?php echo $loadmore;?></span> more</span>

When clicked for the first time, the button updates with the correct remaining results. When clicked a second time, the news results populate, but the count remains the same.

Do i have things in the right order above?

Thanks

EDIT

So i found the issue. The calculations were correct, but when updating the count on the button i was actually removing the class of 'totalleft' with this:

jQuery( ".totalleft" ).replaceWith( finaltotal );

So i replaced this with:

jQuery( ".totalleft" ).text( finaltotal );

and all is fine, thanks for all the help.

Answer 1

parse the text() in .totalleft to get an integer value

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

if your calculations are correct, you should get the right number back

EDIT

because ajax is async you are re-updating the value of .totalleft before the ajax is complete.

make sure that you are doing that in the ajax callback:

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

finally, I'm not sure what var count = jQuery(".singleproduct").length; is so make sure that the values you are expecting are correct by console logging before and after the subtraction

EDIT #2

var count = jQuery(`.singleproduct`).length;
console.log('count :' + count);
var totals = jQuery('.totalleft').text();
console.log('totals :' + totals);

are you getting numbers on the above logs? if not, then you might be replacing some part of your html with the ajax request and singleproduct or totalleft may not be there anymore