javascript - 单击时如何更改按钮中的文本？

Question

我的 HTML 代码是这样的:

<table>
  <tbody class="iteration">
    <tr>
      <td>
        <button class="save">More</button>
      </td>
      <td>
        <div class="cruisedropd">
          <div class="loading"></div>
        </div>
      </td>
    </tr>
  </tbody>
  <tbody class="iteration">
    <tr>
      <td>
        <button class="save">More</button>
      </td>
      <td>
        <div class="cruisedropd">
          <div class="loading"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

我的Javascript代码是这样的:

$(function(){
    $(".cruisedropd").hide();
    $('.save').click(function () {
        var parent = $(this).closest("tbody.iteration");

        parent.toggleClass('is_loading',  parent.hasClass('is_loading') );
        parent.find(".cruisedropd").toggle();
        parent.find('.loading').html("work");

    });


});

演示是这样的:https://jsfiddle.net/oscar11/53okmr78/1/

我想更改按钮中的文本。因此，当单击“更多”按钮时，该按钮将更改为“隐藏”按钮。反之亦然

非常感谢

Answer 1

您可以使用.text()

A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

$('.save').click(function() {
    $(this).text(function(_, text) {
      return text == "More" ? "Hide" : "More";
    });
});

DEMO