Форум

Pavel_G · #1 (**permalink**) 08.10.2014, 06:25

Доброе утро, подскажите как реализовать, есть вот такой HTML:

<div id="qty-spinner" class="qty">
   <i data-helper="reduce" class="qty__helper reduce"></i>
   <input type="text" id="product_qty_{{ item.item.id }}" class="item-qty" value="{{ item.item.quantity }}">
   <i data-helper="add" class="qty__helper add"></i>
</div>

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

<i data-helper="reduce" class="qty__helper reduce"></i>

отнять 1 от числа в input, а по клику на

<i data-helper="add" class="qty__helper add"></i>

соответственно увеличить на 1.

Заранее спасибо

ksa · #2 (**permalink**) 08.10.2014, 08:29

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

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
	$('.reduce').click(function (){
		var o=$(this).next();
		var val=parseInt(o.val());
		if (val>0) {
			o.val(val-1);
		};
	});
	$('.add').click(function (){
		var o=$(this).prev();
		var val=parseInt(o.val());
		o.val(val+1);
	});
});
</script>
</head>
<body>
<div id="qty-spinner" class="qty">
   <i data-helper="reduce" class="qty__helper reduce">-</i>
   <input type="text" id="product_qty" class="item-qty" value="4">
   <i data-helper="add" class="qty__helper add">+</i>
</div>
</body>
</html>
</html>

Pavel_G · #3 (**permalink**) 08.10.2014, 08:43

Спасибо!

utb · #4 (**permalink**) 08.10.2014, 09:39

ksa,
со всем уважением, но

var o=$(this).next();

сломается сразу как добавим элемент, не ?
бест практик, что нам говорит кто знает ?
Мне в голову приходит только
1 - взять по id или классу (уникальный ввиде .js_blabla) - но если в корзине несколько товаров - они генерируют одинаковый код, что уже не очень
2 - взять родителя и в нем найти нужный инпут, но тут надо следить за тем, чтобы кнопки и инпут были на 1 уровне

Кто что скажет ? наверное, есть элегантное решение

ksa · #5 (**permalink**) 08.10.2014, 10:06

Сообщение от utb

Мне в голову приходит только

Могу сказать только одно - каждый дрочет как он хочет...

utb · #6 (**permalink**) 08.10.2014, 10:27

ksa,

ну да)) извратиться можно по-всякому.

я просто думал, есть какой-нибудь лучший вариант или паттерн)

рони · #7 (**permalink**) 08.10.2014, 11:21

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
	$('.qty__helper').click(function (event){
	    event.stopPropagation();
		var o=$(this).siblings('.item-qty');
		var val=parseInt(o.val());
        val += $(this).hasClass("add") ? 1 : val == 0 ? 0 : -1;
	   	o.val(val);
	});
});
</script>
</head>
<body>
<div id="qty-spinner" class="qty">
   <i data-helper="reduce" class="qty__helper reduce">-</i>
   <input type="text" id="product_qty" class="item-qty" value="4">
   <i data-helper="add" class="qty__helper add">+</i>
</div>
</body>
</html>

ksa, а у вас ~~молоко убежало~~ в конце кода

ksa · #8 (**permalink**) 08.10.2014, 11:36

Сообщение от рони

а у вас молоко убежало в конце кода

Вроде работающий скрипт...

danik.js · #9 (**permalink**) 08.10.2014, 12:02

<!DOCTYPE html>

<input type="number" min="0" value="4" />

<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js">
<script>
webshim.polyfill('forms forms-ext');
</script>

danik.js · #10 (**permalink**) 08.10.2014, 12:06

Кстати, с этой штукой можно вполне использовать HTML5 поля типов date, time, month, color и тд. А также кастомизировать их.
Демки: http://jsfiddle.net/trixta/VNuct/

Форум

Справочник

Discord чат

Курсы javascript