Увеличить/уменишить число при клике на кнопку

[ksa]

Как вариант...

$(function (){
	$('body').on('click','.number-prev',function (){
		inc(this.parentNode,-1);
	});
	$('body').on('click','.number-next',function (){
		inc(this.parentNode,1);
	});
	function inc(Obj,Val){
		Obj=$(Obj).find('.valueNumber');
		var val=parseInt(Obj.text());
		if (val==0 && Val==-1) {
			return;
		};
		Obj.text(val+Val);
	};
});

[smart-create]

ksa, Спасибо большое, увы в тех статьях которые Вы прислали ранее нечего не говорилось о методе " $('body').on('click','.number-prev',function (){"
Вы очень помогли)

У меня правда еще вопрос, как раз к стати образовался, относительно делегирования. Вы уже и так достаточно времени на меня потратили. Попрошу Вас уделить еще немного, что бы у меня больше некогда не возникало сложностей с делегированием

У меня в корзине есть кнопки - "Удалить товар", я хочу повесить на нее анимацию загрузки. Что бы человек нажал на кнопку, и пока происходит удаление товара, вместо кнопки появилась гифвка с простенькой анимацией, вот разметка кнопки:

<button id="delete" type="button" name="btn_delet_product" onClick="truncate_product()">
	<img class="active-close visible-close" src="include/img/delete.png" alt="Очистить корзину"> //эта картинка стоит по умолчанию, её делает видимой класс "visible-close", при нажатии на кнопку класс "visible-close" должен ремувиться а картинка пропадать
	<img class="loader-close" src="include/img/loader-close.gif" alt="Очистить корзину"> //эта картинка по умолчанию скрыта и должна появляться при нажатии на кнопку (через add должен добавиться класс который сделает её видимой)
</button>

Скрипт у меня следующий:

function delet_product(product_id){
	$('.active-close').removeClass('visible-close');// убираем класс у видимой картинки и делаем её невидимой
	$('.loader-close').addClass('visible-close');// добавляем класс к невидимой картинке и делаем ее видимой
	$.ajax({
		type: "post",
		url: "main_c/delet_product",
		cache: false,
		data: {'product_id':product_id},
		success: function(data){
			$('.active-close').addClass('visible-close');// возвращаем все назад
			$("#content").load("index.php #content");// возвращаем все назад
		}
	});
}

Как Вы и сами увидели это не совсем правильно потому как такой скрипт будет показывать гифвку на всех кнопка удаления, а нужно только на той, на которую нажали.

Моя ситуация очень похожа на пример описанный здесь https://learn.javascript.ru/event-delegation
Но не совсем там речь идет об одном активном элементе (ячейке таблицы), а у меня их получается 2 - картинка по умолчанию и картинка загрузки.

Я уже пару часов пытаюсь перекрутить ситуацию описанную в статье под себя, но пока не очень хорошо выходит. Если Вас не затруднит, подскажите пожалуйста как сделать правильно

[ksa]

увы в тех статьях которые Вы прислали ранее нечего не говорилось о методе

Я взял первые ссылки по запросу "делегирование событий"... Думал там и про метод on() написали...

[ksa]

Скрипт у меня следующий

Что-то не видно как "навешивается" функция delet_product()...
В нее нужно передать ссылку на текущий элемент, а далее все будет "плясаться" от него.

[smart-create]

Что-то не видно как "навешивается" функция delet_product()...
В нее нужно передать ссылку на текущий элемент, а далее все будет "плясаться" от него.

ksa,
Прошу прощения, не совсем понял вас. Вернее частично понял. В разметке которую я указал выше, есть небольшая опечатка вместо truncate_product() там вызывается именно delet_product(), вот актуальный вариант разметки:

<button id="delete" type="button" name="btn_delet_product" onClick="delet_product()">
	<img class="active-close visible-close" src="include/img/delete.png" alt="Очистить корзину"> //эта картинка стоит по умолчанию, её делает видимой класс "visible-close", при нажатии на кнопку класс "visible-close" должен ремувиться а картинка пропадать
	<img class="loader-close" src="include/img/loader-close.gif" alt="Очистить корзину"> //эта картинка по умолчанию скрыта и должна появляться при нажатии на кнопку (через add должен добавиться класс который сделает её видимой)
</button>

А вот что Вы имеете в виду: "В нее нужно передать ссылку на текущий элемент, а далее все будет "плясаться" от него. ", - я из-за своей неопытности не понял. Разъясните пожалуйста

[ksa]

А вот что Вы имеете в виду

Наверняка у тебя на каждый товар своя кнопка "Удалить"... Она ведь как-то располагается относительно "своего" товара?

Тестовый пример ты не делаешь... Т.ч. я даже предположить не могу какой там у тебя ДОМ сформировался.

[smart-create]

Понял Вас, вот подлинный вариант разметки:

<div id="content" class="container-fluid">
	<div class="col-lg-1 col-md-1 col-sm-1text-center">
		<button id="delete" type="button" name="btn_delet_product" onClick="truncate_product()">
			<img class="active-close visible-close" src="include/img/delete.png" alt="Очистить корзину"> // кнопка очистить корзину
			<img class="loader-close" src="include/img/loader-close.gif" alt="Очистить корзину"> // кнопка очистить корзину
		</button>
	</div>
	<div class="row cart-product">
		<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
			<div class="row product-info">
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 cart-img">
					<img class="product-img" src="include/img/<?=$getName["img"];?>" alt="cart_img"> // здесь изображение товара
				</div>
				<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 cart-title">
					<h2><?=$getName["title"];?></h2><br> // здесь название товара
					<span>Артикул: <?=$getName["articul"];?></span> // здесь артикул товара
				</div>
				<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs">
					<h2><?=$getName["cost"];?></h2><span> грн/шт</span> // здесь цена товара
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 text-center">
					<button type="button" id="close" name="btn_delet_product" onClick="delet_product(<?=$getName["id"];?>)">
						<img class="active-close visible-close" src="include/img/close.png" alt="Удалить товар"> // кнопка удалить товар
						<img class="loader-close" src="include/img/loader-close.gif" alt="Удалить товар"> // кнопка удалить товар
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

[ksa]

вот подлинный вариант разметки

Пробуй так

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
});
function delet_product(Obj,product_id){
	// убираем класс у видимой картинки и делаем её невидимой
	$(Obj).find('.active-close').removeClass('visible-close');
	// добавляем класс к невидимой картинке и делаем ее видимой
	$(Obj).find('.loader-close').addClass('visible-close');
	$.ajax({
		type: "post",
		url: "main_c/delet_product",
		cache: false,
		data: {'product_id':product_id},
		success: function(data){
			// возвращаем все назад
			$(Obj).find('.active-close').addClass('visible-close');
			// возвращаем все назад
			$("#content").load("index.php #content");
		}
	});
}
</script>
</head>
<body>
<div id="content" class="container-fluid">
	<div class="col-lg-1 col-md-1 col-sm-1text-center">
		<button id="delete" type="button" name="btn_delet_product" onClick="truncate_product()">
			<img class="active-close visible-close" src="include/img/delete.png" alt="Очистить корзину"> // кнопка очистить корзину
			<img class="loader-close" src="include/img/loader-close.gif" alt="Очистить корзину"> // кнопка очистить корзину
		</button>
	</div>
	<div class="row cart-product">
		<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
			<div class="row product-info">
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 cart-img">
					<img class="product-img" src="include/img/<?=$getName["img"];?>" alt="cart_img"> // здесь изображение товара
				</div>
				<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 cart-title">
					<h2><?=$getName["title"];?></h2><br> // здесь название товара
					<span>Артикул: <?=$getName["articul"];?></span> // здесь артикул товара
				</div>
				<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs">
					<h2><?=$getName["cost"];?></h2><span> грн/шт</span> // здесь цена товара
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 text-center">
					<button type="button" id="close" name="btn_delet_product" onClick="delet_product(this,<?=$getName["id"];?>)">
						<img class="active-close visible-close" src="include/img/close.png" alt="Удалить товар"> // кнопка удалить товар
						<img class="loader-close" src="include/img/loader-close.gif" alt="Удалить товар"> // кнопка удалить товар
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

[ksa]

onClick="delet_product(this,<?=$getName["id"];?>)">

Добавляем ссылку на саму кнопку...
Далее все действия относительно нее...

$(Obj).find('.active-close').removeClass('visible-close');

В калбек функции переменная Obj будет видна, т.к. была определена при создании функции...

[smart-create]

ksa, Принцип я понял, но все же функция не видит $(Obj), при нажатии на кнопку удалить, консоль выводит Obj is not defined(…)