При нажатии на кнопку в блоке меняется текст и через время текст возвращается в исходное положение

Рейтинг: 0Ответов: 1Опубликовано: 26.05.2023

Подскажите, пожалуйста Внес несколько кнопок на сайт с одинаковыми классами.

Нужно, чтобы при нажатии на кнопку текст менялся, а через пару секунд возвращался в исходное положение

Написал следующий скрипт:

$(document).ready(function() {
  $('.bu').click(function() {
    let izm = $(this).text('Скопировано!').fadeIn();
    setTimeout(function() {
      izm.fadeOut();
    }, 600);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user">
  <button class="bu but">Фамилия имя отчество</button>
</div>
<div class="user">
  <button class="bu but">Фамилия имя отчество</button>
</div>

При нажатии на кнопку текст меняется, но через 0.6 секунд кнопка исчезает вместе с текстом Как можно решить данную проблему?

javascript html jquery
Источник: Stack Overflow на русском

Ответы

▲ 2

Потому что izm -- это Ваша кнопка, а не текст и Вы скрываете всю кнопку, где предварительно заменили текст, просто сделайте console.log(izm). Консоль естественно не поможет решить проблему, но поможет понять с чем Вы работаете. fadeOut() не вернет исходный текст на место, а просто скроет весь элемент кнопки (возвращаемся к console.log(izm)). Перед заменой текста, записывайте исходный текст в переменную и потом через временной промежуток меняйте текст обратно используя переменную с исходным текстом.

и что Вы имели в виду по "через временной промежуток"

Вы же setTimeout() понимаете для чего используете?

$(document).ready(function() {
  $('.bu').click(function() {
    const btn = $(this);
    const btnText = btn.text();
    
    btn.text('Скопировано!');
    setTimeout(() => btn.text(btnText), 600);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user">
  <button class="bu but">Фамилия имя отчество</button>
</div>
<div class="user">
  <button class="bu but">Фамилия имя отчество</button>
</div>