Как работать с DOM?

Question

Владимир Хаттер @mrKhatter

программист

JavaScript

Как работать с DOM?

Как в jquery реализовать следующую логику:

При клике на кнопку скрипт проверяет пуст ли блок .box(он только объявлен и пустой) если нет то ищет .item[data-articul="'+articul+'"] если не находит то создает эту запись если не пуст и записи такой нет то создает запись с новым артикулом.

Как это реализовать?!

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

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

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

Interface @Interface

Вы же уже описали алгоритм. Переведите свои "если" в "if"ы и получите решение :)

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

Владимир Хаттер @mrKhatter Автор вопроса

Interface, переводил но при клики на один линк все отрабатывает как надо а при клике на другой то добавляет много записей а не обновляет существующую.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<div class="itemBox">
		<div class="item"><a href="#buy" data-articul="as-231">toCart</a></div>
		<div class="item"><a href="#buy" data-articul="dfe-001">toCart</a></div>
	</div>

	<div class="cartBox"></div>


	<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

  <script>
  	$('a[href="#buy"]').on('click', function(e){
  		e.preventDefault();
  		var articul = $(this).data('articul');
  		var i=1;
  		if($('.cartBox>.item') == undefined ){
  			$('.cartBox').append('<div class="item" data-articul="'+articul+'"><span>'+i+'</span> <b>'+articul+'</b></div>');
  		}else{
  			if($('.cartBox>.item').data('articul') != articul){
	  			$('.cartBox').append('<div class="item" data-articul="'+articul+'"><span>'+i+'</span> <b>'+articul+'</b></div>');
	  		}else{
	  			$('.cartBox>.item[data-articul="'+articul+'"]').children('span').text(i++);
	  		}
  		}
  	});
  </script>
</body>
</html>

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

Interface @Interface

Владимир Хаттер, создайте песочницу где-нибудь на jsfiddle или codepen. Это как правило сильно повышает шанс получить помощь

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

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

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

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

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

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

JavaScript

Простой
Как добавить поле в объект и вложенные в него объекты?
- 1 подписчик
- 23 минуты назад
- 13 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Существуют ли программы для реверс инженеринга минифицированного кода на JS?
- 1 подписчик
- 10 часов назад
- 79 просмотров
1

ответ
JavaScript

Простой
Как разрешить вводить только анлгийские буквы и цифры JavaScript?
- 1 подписчик
- 14 часов назад
- 53 просмотра
1

ответ
JavaScript

+2 ещё

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

ответа
JavaScript

+1 ещё

Средний
Как сделать чтобы график в chart js начинался с -100?
- 1 подписчик
- 16 часов назад
- 58 просмотров
2

ответа
JavaScript

+3 ещё

Простой
Почему некорректно работает воспроизведение музыки в боте на discord.js?
- 1 подписчик
- 19 часов назад
- 33 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Не загружаются картинки с использованием webpack?
- 1 подписчик
- 22 часа назад
- 71 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как сделать жирным одно слово на кнопке?
- 1 подписчик
- 23 часа назад
- 144 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Как в битрикс 1с сделать ajax post запрос на изменение цены товара в карточке товара?
- 1 подписчик
- вчера
- 30 просмотров
0

ответов
JavaScript

+2 ещё

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

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

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript Developer (backend / fullstack)

Brightdata • Тель-Авив

от 5 500 до 6 500 $

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

Rocket • Брянск

от 60 000 до 100 000 ₽

Разработка веб-сервиса

24 мая 2024, в 10:38

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

Доработка магазина на 1С-битриксе

24 мая 2024, в 10:22

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

Оптимизация и доработки сайта на ModX

24 мая 2024, в 10:21

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

Вы же уже описали алгоритм. Переведите свои "если" в "if"ы и получите решение :)
Interface, переводил но при клики на один линк все отрабатывает как надо а при клике на другой то добавляет много записей а не обновляет существующую.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="itemBox"> <div class="item"><a href="#buy" data-articul="as-231">toCart</a></div> <div class="item"><a href="#buy" data-articul="dfe-001">toCart</a></div> </div> <div class="cartBox"></div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script> $('a[href="#buy"]').on('click', function(e){ e.preventDefault(); var articul = $(this).data('articul'); var i=1; if($('.cartBox>.item') == undefined ){ $('.cartBox').append('<div class="item" data-articul="'+articul+'"><span>'+i+'</span> <b>'+articul+'</b></div>'); }else{ if($('.cartBox>.item').data('articul') != articul){ $('.cartBox').append('<div class="item" data-articul="'+articul+'"><span>'+i+'</span> <b>'+articul+'</b></div>'); }else{ $('.cartBox>.item[data-articul="'+articul+'"]').children('span').text(i++); } } }); </script> </body> </html>
Владимир Хаттер, создайте песочницу где-нибудь на jsfiddle или codepen. Это как правило сильно повышает шанс получить помощь

Как работать с DOM?

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

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

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