Показать сообщение отдельно
  #5 (permalink)  
Старый 27.03.2017, 00:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Spinner type number in jquery плюс минус
dima-kruglyak,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="content">

    <input type="text" value="200" class="price">

    <button class="minus value-control" data-action="minus" data-target="quantity" data-cart-id="1">- </button>
    <input type="text" value="1" id="quantity" min="1" max="10" class="quantity">
    <button class="plus value-control" data-action="plus" data-target="quantity" data-cart-id="1"> + </button>

    <span class="total">200</span>
</div>

<div class="content">
    <input type="text" value="200" class="price">

    <button class="minus value-control" data-action="minus" data-target="quantity" data-cart-id="1">- </button>
    <input type="text" value="1" id="quantity" min="1" max="10" class="quantity">
    <button class="plus value-control" data-action="plus" data-target="quantity" data-cart-id="1"> + </button>

    <span class="total">200</span>
</div>

<script>

    $(function () {
        $(".content").each(function (indx, el) {

            $(el).on('click', '.value-control', function (event) {
                var action = $(this).attr('data-action');
                var cls = $(this).attr('data-target');
                var add = $(this).attr("data-cart-id");
                var input = $("."+cls, el)[0];
                var min = +input.getAttribute("min");
                var max = +input.getAttribute("max");
                //input.value = +input.value||min;
                input.value -= action == "plus" ? -add : add;
                input.value  = Math.min(Math.max(min,+input.value),max);
                var price = $(".price", el)[0];
                //price.value = +price.value||0;
                var total = price.value * input.value;
                $('.total', el).text(total)
            });
        });
    });
</script>
Ответить с цитированием