Как выполнить скрипт после нескольких нажатий на 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 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 2 часа назад
- 34 просмотра
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 3 часа назад
- 21 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 4 часа назад
- 23 просмотра
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 138 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 161 просмотр
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 83 просмотра
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 51 просмотр
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Рефакторинг vue.js/nest.js интерфейса у админки

22 нояб. 2024, в 15:50

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

Разработать индикатор для торговой платформы Metatreder5

22 нояб. 2024, в 15:00

2500 руб./в час

Разработка базы данных на SQL

22 нояб. 2024, в 14:51

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?

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

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

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