Подскажите, пожалуйста Внес несколько кнопок на сайт с одинаковыми классами.
Нужно, чтобы при нажатии на кнопку текст менялся, а через пару секунд возвращался в исходное положение
Написал следующий скрипт:
$(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 секунд кнопка исчезает вместе с текстом Как можно решить данную проблему?
izm
-- это Ваша кнопка, а не текст и Вы скрываете всю кнопку, где предварительно заменили текст, просто сделайтеconsole.log(izm)
.fadeOut()
не вернет исходный текст на место, а просто скроет весь элемент. Перед заменой текста, записывайте исходный текст в переменную и потом через временной промежуток меняйте текст обратно используя переменную с исходным текстом.fadeIn
), а через 600мс скрываете (fadeOut
). Поменяйте методы местами. А чтобы вернуть исходный текст, его нужно или же перед изменением "запомнить" или у кнопок прописать, например, data-атрибут с этим текстом и брать оттуда