Не работает добавление количества товара на сайте, в чем проблема?

Question

[it_pear_yurec]

Не изменяется цена при клике на плюс и минус

<div class="services_button_block">
									<div class="services__btn_span text-center">
										<div class="services__btn_span__cell">
											<span class="services_minus services__btn_span__cell">
												-
											</span>
										</div>
										<div class="services__btn_span__cell">
											<span class="services_nomer services__btn_span__cell">
												2
											</span>
										</div>
										<div class="services__btn_span__cell">
											<span class="services_plus services__btn_span__cell">
												+
											</span>
										</div>
									</div>
									<button class="btn__pink services__btn">
										заказать
									</button>
								</div>

$(document).ready(function(){

	// скрипт выбора количества продукта 
	// $services = $('.services__btn_span');
	// $minus = $('.services_minus');
	// $nomer = $('.services_nomer');
	// $plus = $('.services_plus');

	$('.services_minus').click(function(){
		$nomer = $(this).next('.services_nomer').text();
		$finish = parseInt($nomer) - 1;
		$nomer.text($finish);
	});

	$('.services_minus').click(function(){
		$nomer = $(this).next('.services_nomer').text();
		$finish = parseInt($nomer) + 1;
		$nomer.text('sdf');
	});

});

Comments

[it_pear_yurec]

-




2




+




заказать

[it_pear_yurec]

html код

Answer 1

[0xD34F]

Оба обработчика назначены одним и тем же элементам - .services_minus. То есть, при клике на плюс не происходит вообще ничего, а минус - количество будет уменьшаться, и сразу же увеличиваться обратно.

Относительное расположение кнопок и элемента с количеством совсем не то, что вам кажется. Вместо того, чтобы хватать следующий элемент после кликнутой кнопки, надо от кнопки подняться до общего её и количества предка, внутри которого уже искать количество. Т.е., .next('.services_nomer') следует заменить на

.closest('.services_button_block').find('.services_nomer')

Нашли элемент с количеством, достали из него текст - это всё одно выражение, т.е. результатом является строка и самого элемента с количеством у вас на руках нет, устанавливать новый текст вы пытаетесь строке. Доставать текст из элемента с количеством надо там, где у вас parseInt. Или можно оформить как одно выражение и поиск элемента с количеством и его обновление, передав в метод text функцию, которая примет текущее содержимое элемента и должна будет вернуть новое:

$('.services_minus').click(function() {
  $(this)
    .closest('.services_button_block')
    .find('.services_nomer')
    .text((i, text) => Math.max(0, text - 1));
});

$('.services_plus').click(function() {
  $(this)
    .closest('.services_button_block')
    .find('.services_nomer')
    .text((i, text) => +text + 1);
});

Comments

[it_pear_yurec]

Устранил ошибку, но все равно не работает((

$('.services_minus').click(function(){
$nomer = $(this).next('.services_nomer').text();
$finish = parseInt($nomer) - 1;
$nomer.text($finish);
});

$('.services_plus').click(function(){
$nomer = $(this).next('.services_nomer').text();
$finish = parseInt($nomer) + 1;
$nomer.text($finish);
});

[0xD34F]

Что если вместо .next('.services_nomer') сделать

.closest('.services_button_block').find('.services_nomer')

??

[it_pear_yurec]

0xD34F, изменил, но не помогло. Дело в том, что там 6 блоков, возмонжно в этом причина. вот что получилось после изменения

$('.services_minus').click(function(){
$nomer = $(this).closest('.services__btn_span').find('.services_nomer').text();
$finish = parseInt($nomer) - 1;
$nomer.text($finish);
});

$('.services_plus').click(function(){
$nomer = $(this).closest('.services__btn_span').find('.services_nomer').text();
$finish = parseInt($nomer) + 1;
$nomer.text($finish);
});

[0xD34F]

В момент подключения обработчиков сами элементы существуют?

[it_pear_yurec]

0xD34F, да, элементы существуют

[it_pear_yurec]

0xD34F, мне кажется вся проблема в том что невозможно найти ближайший элемент от того элемента на который кликнули

[0xD34F]

Попробуйте так:

$('.services_minus').click(function() {
  $(this)
    .closest('.services_button_block')
    .find('.services_nomer')
    .text((i, text) => Math.max(0, text - 1));
});

$('.services_plus').click(function() {
  $(this)
    .closest('.services_button_block')
    .find('.services_nomer')
    .text((i, text) => +text + 1);
});

[it_pear_yurec]

0xD34F, да, помогло, больше спасибо. Можете рассказать в чем была проблема ?

[0xD34F]

Дополнил ответ.