Необходимо при клике менять текст, а при повторном менять на начальный

Question

HTML:

<p id="p" align="center" width="100%" style=" border:1px solid red; background:#ffffcc; font-weight:900; padding:5px ">
    Спрятать фото
</p>

JQuery:

$("#p").on("click", function () {
    $(".head-moto-img").slideToggle(2000, function () {
        $("#p").text("Показать фото")
    })
});

Answer 1

Хорошей практикой является полное разделение стилей, скриптов и контента. Также рекомендую для кликабельных элементов использовать <button>, так как он имеет возможность получать фокус с клавиатуры, и его можно стилизировать как угодно.

$('button.toggle').on('click', function () {
  $(this).toggleClass('active');
});

button.toggle {
  border: 1px solid red; 
  padding: 10px;
  cursor: pointer;
  background-color: yellow;
  color: green;
}
button.toggle.active {
  color: red;
}

button.toggle .show { display: inline; }
button.toggle .hide { display: none; }

button.toggle.active .show { display: none; }
button.toggle.active .hide { display: inline; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="toggle">
  <span class="show">Показать фото</span>
  <span class="hide">Спрятать фото</span>
</button>

Answer 2

Мой вариант решения данной задачи. Используется только JS, без добавления ненужных классов и стилей. Здесь используется стандартный обмен значениями по кругу и метод text(). Варианты текста устанавливаются в переменных textDefault - тест по умолчанию, и textOther - альтернативный текст.

var textDefault = 'Тестовый текст';
var textOther = 'Другой текст';

$('#test-button').text(textDefault);

$('#test-button').click(function() {
  textDefault = textOther;
  textOther = $('#test-button').text();
  $('#test-button').text(textDefault);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="test-button"></button>

БЛОГ НА HUSL

Необходимо при клике менять текст, а при повторном менять на начальный

Ответы (2 шт):