Javascript 切换按钮来更改其标题

Question

我在 HTML 中使用的代码如下

$(function() {
  $("#button").click(function() {
    $("span.text").toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Text ON</button>

<span class="text">Text</span>

单击按钮时，文本出现或消失。

如何使按钮标题“Text ON”与另一个标题“Text OFF”同时出现和消失？

Answer 1

您可以在切换后使用 is(:visible) 方法来检查 span 是可见还是隐藏。现在根据状态，更改按钮文本如下。

$(function() {
  $("#button").click(function() {
    var $btn = $(this);
    var $span = $("span.text");
    $span.toggle(400, function() {
      if ($(this).is(":visible")) {
        $btn.text('Text ON');
      } else {
        $btn.text('Text OFF');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Text ON</button>

<span class="text">Text</span>