单击后更改按钮文本 ajax load more while loading

Question

今天，我正在努力 Ajax 为我的 WordPress 帖子加载更多内容。该功能正在运行并获取我的内容。但我想知道如何在加载时向我的按钮添加文本更改。

这是我的脚本：

var page = 2;
jQuery(function($) {
    $('body').on('click', '.loadmore', function() {
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': blog.security
        };

        $.post(blog.ajaxurl, data, function(response) {
            if($.trim(response) != '') {
                $('#blog-loop .row .container .row').append(response);
                page++;
            } else {
                $('.loadmore').hide();
            }
        });
    });
});

任何人都可以向我解释我需要在哪里完成这项工作吗？

提前谢谢你。

Answer 1

像这样：

var page = 2;
$(function() {
  $('body').on('click', '.loadmore', function() {
    const $but = $(this); // save the clicked button
    $but.text("Loading..."); // change the text
    var data = {
      'action': 'load_posts_by_ajax',
      'page': page,
      'security': blog.security
    };

    $.post(blog.ajaxurl, data, function(response) {
      $but.text("Load more..."); // reset the text
      if ($.trim(response) != '') {
        $('#blog-loop .row .container .row').append(response);
        page++;
      } else {
        $but.hide();
      }
    });
  });
});

单击后更改按钮文本 ajax load more while loading

Change button text after click for ajax load more while loading

ajax

wordpress

jquery

posts