Как сделать «+» к товару?

Question

[Павел]

Я занимаюсь только версткой , попросили сделать такие вот штуки:



подскажите как сделать , это формой надо верстать? Интересен вопрос со стороны бекенда , как лучше сделать чтоб потом меньше мороки было тому кто будет после меня делать?
Спасибо

Answer 1

[ant1vit]

<div class="number">
    <span class="minus">-</span>
    <input type="text" value="1" size="5"/>
    <span class="plus">+</span>
</div>

<script type="text/javascript" >
        $(document).ready(function() {
            $('.minus').click(function () {
                var $input = $(this).parent().find('input');
                var count = parseInt($input.val()) - 1;
                count = count < 1 ? 1 : count;
                $input.val(count);
                $input.change();
                return false;
            });
            $('.plus').click(function () {
                var $input = $(this).parent().find('input');
                $input.val(parseInt($input.val()) + 1);
                $input.change();
                return false;
            });
        });

Comments

[Павел]

ок , не плохо , а дальше? Именно при "купить" , нужно в корзину добавить число?

[Павел]

codepen.io/mrusklon/pen/yVdXbV

Answer 2

[Ильдар Гизетдинов]

$(".input-buttons").each(function () {
	// 	bplus = +
	//	bminus = -
	
	var input = ($(this).is("[data-target]") ? $($(this).attr("data-target")) : ($(this).is(".bminus") ? $(this).next() : $(this).prev()));
	
	$(this).click(function () {
		var max = $(input).is("[data-max]") ? parseInt($(input).attr("data-max")) : 0;
		var step = $(input).is("[data-step]") ? parseInt($(input).attr("data-step")) : 1;
		
		var val = parseInt($(input).val()) + (step * ($(this).is(".bminus") ? -1 : 1));
		
		if (max != 0 && max < val) {
			val = max;
		}
		
		$(input).val(val).change();
	});
	
	$(input).change(function () {
		var max = $(this).is("[data-max]") ? parseInt($(this).attr("data-max")) : 0;
		var step = $(this).is("[data-step]") ? parseInt($(this).attr("data-step")) : 1;
		
		var val = parseInt($(input).val());
		var valChanged = false;
		
		if (step > 1) {
			if (val % step > 0) {
				val = Math.ceil(val / step) * step;
				valChanged = true;
			}
		}
		
		if (val > max) {
			val = max;
			valChanged = true;
		}
		
		if (valChanged) {
			$(input).val(val).change();
			
			return false;
		}
	});
});

Comments

[Павел]

в минус читает , а в плюс всегда >0 ?

[Ильдар Гизетдинов]

mrusklon: https://jsfiddle.net/bfcLjo16/

[Ильдар Гизетдинов]

mrusklon: естественно он не должен уходить в минус, в данном случае :) код вам был дан как пример)

[Павел]

Ильдар Гизетдинов: спасибо за пример. Этого хватит я думаю для +/- , а с корзиной как думаете нечего мне больше не нужно делать?

[Ильдар Гизетдинов]

mrusklon: конкретно клик по кнопке, фиксация изменений, и прочее, это уже дело того кто будет натягивать сайт

[Павел]

Ильдар Гизетдинов: вот это и хотел услышать , спасибо!