Как выполнить скрипт после нескольких нажатий на div?

Question

DivineDraft @DivineDraft

JavaScript

Как выполнить скрипт после нескольких нажатий на div?

Как можно выполнить скрипт, после нескольких нажатий на определенный див?
к примеру есть див #test, как можно после 5 клика по нему удалить его или добавить какой-либо класс?

Вопрос задан более трёх лет назад
162 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

DivineDraft @DivineDraft Автор вопроса

Спасибо, буду пробовать.

Написано более трёх лет назад
DivineDraft @DivineDraft Автор вопроса
EEclipsEE, подскажите, чего делаю не так? С данным условием все запускается, но вот не вычитается если значение больше.

$( ".test" ).on( "click", function() { if ($(this).is('[data-click="0"]')) { $(this).addClass('delete'); } else { $("this").attr(+$("this").attr() - 1); } });
Написано более трёх лет назад

EEclipsEE @EEclipsEE

DivineDraft, Вот мой index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="test" data-click="0" style="width:100px; height: 100px; background: red;"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="index.js"></script>
</body>
</html>

А это мой index,js:

$('#test').on('click', function(){
  let x = +$(this).attr('data-click');
  if(x==5){
    $(this).remove();
  }
  else{
    x++;
    $(this).attr('data-click',x);
  }
})

Все работает. После 5 нажатий на див с id test, этот элемент удаляется из dom

Написано более трёх лет назад

DivineDraft @DivineDraft Автор вопроса

EEclipsEE, огромное спасибо, все работает. Приятного Вам дня.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

3 комментария

DivineDraft @DivineDraft Автор вопроса

Большое спасибо.
И если можете, подскажите пожалуйста, а можно ли данный вариант накинуть на несколько div, ибо после одного срабатывания уже перестает работать, даже если дублировать код и вписывать другой див.

Написано более трёх лет назад
Dima Polos @dimovich85 Куратор тега JavaScript

DivineDraft, вместо id используйте класс, и в $() передайте класс, такое событие подвесится на все дивы с этим классом. Только переменную counter надо будет создавать внутри функции обработчика, так как вне ее переменная будет общая для всех. Перестает работать, так как счетчик надо обнулить после срабатывания, тут в условии написано, что если каунтер == 5, а потом при клике на див каунтер после 5 клика уже 6, а после еще нажатия 7, а проверка на == 5 стоит, так что каунтер будет расти, а ничего повторно работать не будет, в if(++count == 5){
действие какое-то
counter = 0;
}

Написано более трёх лет назад
DivineDraft @DivineDraft Автор вопроса

Dima Polos, спасибо, буду пробовать.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 56 минут назад
- 11 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Three.js объект сзади не виден при повороте к нему лицом?
- 2 подписчика
- 4 часа назад
- 57 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 7 часов назад
- 105 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 8 часов назад
- 42 просмотра
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- 22 часа назад
- 107 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 23 часа назад
- 78 просмотров
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 23 часа назад
- 44 просмотра
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 2 подписчика
- вчера
- 69 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 22 апр.
- 69 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- 22 апр.
- 80 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Сверстать лейдинг на Joomla

24 апр. 2024, в 22:11

2000 руб./за проект

Консультация ПЛИС (FPGA)

24 апр. 2024, в 22:00

500 руб./в час

SEO сайта услуг

24 апр. 2024, в 21:49

10000 руб./за проект

Answer 1 · 2018-01-13 00:12:18

вешаетет на него пользовательский атрибут.

<div id="test" data-click="0">

после чего в оы в событии onclick пишите функцию с if условием. если значение data-click = 5 удалете div, а если нет, то протсо наращиваете data-click

Answer 2 · 2018-01-13 00:10:11

Михаил Макаров @NightmareZz

Нищий разработчик из Симферополя

(function() {
    var counter = 0;

    $('#test').click(function() {
        if (++counter == 5) {
            $(this).addClass('some-class');
        }
    });
})();

Ответ написан более трёх лет назад

3 комментария

Как выполнить скрипт после нескольких нажатий на div?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт