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

Question

DivineDraft @DivineDraft

JavaScript

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

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

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

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

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

Помогут разобраться в теме Все курсы

Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Яндекс Практикум

Мидл фронтенд-разработчик

5 месяцев

Далее

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

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, спасибо, буду пробовать.

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

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, огромное спасибо, все работает. Приятного Вам дня.

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

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

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

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

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

JavaScript

+1 ещё

Простой
Неправильно работает crypto.subtle.deriveKey в Firefox, баг или мой косяк?
- 2 подписчика
- 16 окт.
- 93 просмотра
0

ответов
JavaScript

Простой
Как подгружать xml с перерисовкой таблицы?
- 3 подписчика
- 14 окт.
- 141 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Как решить задачку из контеста?
- 1 подписчик
- 13 окт.
- 228 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Есть ли js-библиотека для офлайн-распознавания русской речи?
- 1 подписчик
- 12 окт.
- 161 просмотр
2

ответа
JavaScript

Простой
Почему не работает в консоли setTimeout?
- 1 подписчик
- 11 окт.
- 322 просмотра
1

ответ
JavaScript

Простой
Как прочитать ответ сервера после отправки формы?
- 2 подписчика
- 27 сент.
- 286 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как менять картинки у карточки в списке товаров?
- 4 подписчика
- 22 сент.
- 338 просмотров
1

ответ
JavaScript

Простой
Где найти исходники стандартной библиотеки JavaScript?
- 1 подписчик
- 21 сент.
- 322 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Где найти такой слайдер?
- 1 подписчик
- 20 сент.
- 245 просмотров
1

ответ
JavaScript

+2 ещё

Простой
На сколько практично разделять логику загрузки данных?
- 4 подписчика
- 16 сент.
- 1211 просмотров
2

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

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

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

ITK academy • Нижний Новгород

от 80 000 до 120 000 ₽

React Developer

ITK academy • Воронеж

от 50 000 до 90 000 ₽

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

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

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

(function() {
    var counter = 0;

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

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

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

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

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

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

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

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

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

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

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