При нажатии на кнопку в блоке меняется текст и через время текст возвращается в исходное положение
Подскажите, пожалуйста Внес несколько кнопок на сайт с одинаковыми классами.
Нужно, чтобы при нажатии на кнопку текст менялся, а через пару секунд возвращался в исходное положение
Написал следующий скрипт:
$(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 секунд кнопка исчезает вместе с текстом Как можно решить данную проблему?
Ответы (1 шт):
Потому что 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>