Jquery - 替换按钮的标签并在片刻后使用其默认标签

Question

我想暂时更改按钮的标签，然后将其恢复为原始状态。 所有注释行都是我尝试使其工作但我正在努力。 有人可以告诉我正确的方法吗？ 代码笔

$(".btn").click(function() {
  //$(this).contents().remove();
  $(this).html('loading...');
  //$(this).html('<i class="fa fa-spinner fa-spin"></i> loading...'); //adding animation
  //$(this).attr('disabled', true); //disabling 
  setTimeout(() => {
    //how to reset default contents????????????????
    //$(this).children().find('fa').remove();
    //$(this).attr('disabled', false); //enabling
    //$(this).html('<i class="fa fa-plus"></i> Add Book'); //defaulting
    //$(this).children().show();
  }, 500);
});

<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>

Answer 1

只需一个按钮：

$(".btn").click(function() {
  const $spans = $(this).find("span");
  $spans.eq(0).toggle();
  $spans.eq(1).toggle();
  setTimeout(() => {
    $spans.eq(0).toggle();
    $spans.eq(1).toggle();
  }, 500);
});

<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"
/>
<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit"><span><i class="fa fa-plus"></i> Edit Book</span><span hidden>loading...</span></button>
      </td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit"><span><i class="fa fa-plus"></i> Edit Book</span><span hidden>loading...</span></button>
      </td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit"><span><i class="fa fa-plus"></i> Edit Book</span><span hidden>loading...</span></button>
      </td>
    </tr>
  </tbody>
</table>

使用两个按钮

$(".btn").click(function() {
  const $btn = $(this).hide(); // hide and save
  $(this).next().show()
  setTimeout(() => {
    $btn.show()
    $btn.next().hide()
  }, 500);
});

<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"
/>
<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit"><i class="fa fa-plus"></i> Edit Book</button>
        <button class="btn btn-success btn-lg load" hidden>loading...</button></td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit"><i class="fa fa-plus"></i> Edit Book</button>
        <button class="btn btn-success btn-lg load" hidden>loading...</button></td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit"><i class="fa fa-plus"></i> Edit Book</button>
        <button class="btn btn-success btn-lg load" hidden>loading...</button></td>
    </tr>
  </tbody>
</table>