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>

Javascript切换按钮以更改其标题

1 个答案: