0

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

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

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

$(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 секунд кнопка исчезает вместе с текстом Как можно решить данную проблему?

3
  • Потому что izm -- это Ваша кнопка, а не текст и Вы скрываете всю кнопку, где предварительно заменили текст, просто сделайте console.log(izm). fadeOut() не вернет исходный текст на место, а просто скроет весь элемент. Перед заменой текста, записывайте исходный текст в переменную и потом через временной промежуток меняйте текст обратно используя переменную с исходным текстом.
    – Simon
    Commented 26 мая 2023 в 9:36
  • да, знаю, что izm - это кнопка. не совсем понял как console.log(izm) поможет решить проблему. и что Вы имели в виду по "через временной промежуток"?
    – werstalll
    Commented 26 мая 2023 в 9:52
  • Вы при нажатии показываете кнопку (fadeIn), а через 600мс скрываете (fadeOut). Поменяйте методы местами. А чтобы вернуть исходный текст, его нужно или же перед изменением "запомнить" или у кнопок прописать, например, data-атрибут с этим текстом и брать оттуда
    – Deonis
    Commented 26 мая 2023 в 10:20

1 ответ 1

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>

1
  • Спасибо большое! На примере более понятно стало, что Вы имели в виду.
    – werstalll
    Commented 26 мая 2023 в 13:29

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.