Кнопка переключения Javascript для изменения заголовка - PullRequest
Новая
       32

Кнопка переключения Javascript для изменения заголовка

0 голосов
/ 04 сентября 2018

Код, с которым я работаю в 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>

При нажатии кнопки текст либо появляется, либо исчезает.

Как сделать так, чтобы заголовок кнопки "Текст ВКЛ" чередовался с другим заголовком "Текст ВЫКЛ" одновременно с появлением и исчезновением текста?

1 Ответ

0 голосов
/ 04 сентября 2018

Вы можете использовать метод 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>
...