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

Question

DivineDraft @DivineDraft

JavaScript

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

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

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

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

Подписаться 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 ещё

Средний
Можно ли тестировать javascript код по кнопке на клиенте?
- 1 подписчик
- 14 часов назад
- 72 просмотра
1

ответ
JavaScript

Простой
Как изменить набор ключей в массиве?
- 1 подписчик
- вчера
- 100 просмотров
2

ответа
JavaScript

Средний
Как стилизовать select в cs-cart?
- 1 подписчик
- 03 нояб.
- 39 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Возможно ли убрать шапку в telegram mini app?
- 3 подписчика
- 02 нояб.
- 367 просмотров
1

ответ
JavaScript

Простой
Где попрактиковаться с табличными данными, как Pandas, в JS?
- 1 подписчик
- 02 нояб.
- 117 просмотров
1

ответ
JavaScript

Простой
Как без перезагрузки страницы добавить параметры в строку ввода браузера с помощью jquery?
- 1 подписчик
- 01 нояб.
- 96 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как корректно обрабатывать события метода animate в Web Animation API?
- 1 подписчик
- 01 нояб.
- 150 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как в js, scss, html реализовать tooltip который показывается если навести на объект ниже?
- 2 подписчика
- 31 окт.
- 95 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как на JavaScript расшифровать строку с помощью ключа?
- 1 подписчик
- 31 окт.
- 210 просмотров
3

ответа
JavaScript

+1 ещё

Средний
Почему ref не видит дочерний элемент в себе?
- 1 подписчик
- 31 окт.
- 95 просмотров
0

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

JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать интерфейс (UX/UI) для финансового сервиса

05 нояб. 2024, в 02:29

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

Исправить критические ошибки архитектуры приложения на Flutter, чаты

05 нояб. 2024, в 01:36

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

Редактирование 2 рекламных видеороликов, нарезка для рекламы, озвучка

05 нояб. 2024, в 00:45

2000 руб./в час

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?

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

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

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