如何用jQuery临时替换按钮文本并恢复其默认内容？

要实现点击按钮后临时替换文本，一段时间后恢复原始状态，核心是提前保存按钮的初始HTML内容，这样在超时回调里就能直接恢复。以下是正确的实现代码：

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button class="btn btn-success btn-lg"><i class="fa fa-plus"></i> Edit Book</button>

JavaScript 代码 #

$(".btn").click(function() {
  // 保存按钮的原始HTML内容
  const originalContent = $(this).html();
  
  // 设置加载状态的内容（带旋转动画）
  $(this).html('<i class="fa fa-spinner fa-spin"></i> loading...');
  // 禁用按钮防止重复点击
  $(this).attr('disabled', true);

  setTimeout(() => {
    // 恢复原始内容
    $(this).html(originalContent);
    // 重新启用按钮
    $(this).attr('disabled', false);
  }, 1500); // 自定义恢复延迟时间，示例为1.5秒
});

关键说明 #

• 点击按钮时立即通过$(this).html()获取并保存原始内容到变量，这是实现恢复功能的核心
• 替换为加载状态时加入Font Awesome旋转动画，能更直观地反馈状态
• 禁用按钮可避免用户在加载过程中重复点击，防止逻辑混乱
• 超时回调中直接将保存的原始HTML重新赋值给按钮，即可完全恢复初始状态

内容的提问来源于stack exchange，提问作者janeiro