jQuery — очищаем поле с результатом после каждого выполненного события

seasonvar append example 620x660 - jQuery — очищаем поле с результатом после каждого выполненного события

Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн кинотеатр сериалов. У них есть премиум и если тыкать на любой из трех пакетов выше, будет бесконечно выводиться ошибка (есть имеются проблемы).

Пример попроще описан ниже. Суть та же. Если тыкать на кнопку будут создаваться заготовленные ранее тексты и добавляться друг за другом.

Исправляется такое недоразумение очень легко, главное не забывать о нем.

jquery clear result 620x344 - jQuery — очищаем поле с результатом после каждого выполненного события

jQuery код решения выше

<!-- HTML CODE -->
<div class="container">
   <p class="button">НАЖАТЬ</p>

   <p class="result"></p>
</div>
задаем по умолчанию значение клика равным нулю
var n = 0;

//выводим результат сразу при загрузке странице
$('.result').append('Нажато ' + n + ' раз<br>');

//создаем событие на клик по кнопке
$('.button').click(function(){
   
   //прибавляем к переменной единицу
   n = n+1;
   
   //выводим строку с результатом 
   $('.result').append('Нажато ' + n + ' раз<br>');

});

Как видно на примере выше, при каждом клике будет добавляться новая строка. Это неудобно, например, когда у нас форма обратной связи и идет проверка введенных результатов.

С подобным решением будут выводиться бесконечное количество результатов. Уберем дублирование.

jQuery код удаления дублей

jquery clear result 1 620x286 - jQuery — очищаем поле с результатом после каждого выполненного события
задаем по умолчанию значение клика равным нулю
var n = 0;

//выводим результат сразу при загрузке странице
$('.result').append('Нажато ' + n + ' раз<br>');

//создаем событие на клик по кнопке
$('.button').click(function(){
   
   //прибавляем к переменной единицу
   n = n+1;
   
   //выводим строку с результатом предварительно очистив ее от всего содержимого
   $('.result').empty().append('Нажато ' + n + ' раз<br>');

});

Мы добавили все лишь один метод .empty() и полностью изменили логику работы скрипта

Похожие записи



Deprecated: Функция WP_Query вызвана с аргументом, который считается устаревшим с версии 3.1.0! Параметр caller_get_posts считается устаревшим. Используйте ignore_sticky_posts. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6085
JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...
Telegram — отправка данных в чат с сайта с помощью jQuery и Ajax + защита через Cookies
HTML форма, которую обрабатывает jQuery, записывает данные в Cookies и если все ОК — пересылает данные в Telegram с помощью...

Deprecated: Файл Тема без comments.php с версии 3.0.0 считается устаревшим. Альтернативы не предусмотрено. Пожалуйста, включите шаблон comments.php в вашу тему. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6085

Добавить комментарий