Как работать с циклом?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="block-1"> <div class="block-1-1"> <input type="text" value="1" class="block-col"> <input type="text" value="5" class="block-price"> <span class="block-total"></span> </div> </div> <div class="block-1"> <div class="block-1-1"> <input type="text" value="1" class="block-col"> <input type="text" value="5" class="block-price"> <span class="block-total"></span> </div> </div> <script type="text/javascript"> $(function () { $(".block-1").each(function (indx, el) { $('.block-1-1', el).on('change', 'input', function(event) { var total = (parseInt($( ".block-col" ).val()) * parseInt($( ".block-price" ).val())); $('.block-total').text(total); }); }); }); </script> Подскажите плиз как сделать чтобы скрипт выполняться только в блоке в который ввожу значения. |
dima-kruglyak,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $(".block-1").each(function (indx, el) { $(el).on('input', 'input', function(event) { var total = (parseInt($( ".block-col", el).val()) * parseInt($( ".block-price",el ).val()))||""; $('.block-total', el).text(total); }); }); }); </script> </head> <body> <div class="block-1"> <div class="block-1-1"> <input type="text" value="1" class="block-col"> <input type="text" value="5" class="block-price"> <span class="block-total"></span> </div> </div> <div class="block-1"> <div class="block-1-1"> <input type="text" value="1" class="block-col"> <input type="text" value="5" class="block-price"> <span class="block-total"></span> </div> </div> </body> </html> |
Можете подсказать в где ошибка, начинает считать после второго клика на +
<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 total = (parseInt($(".quantity", el).val()) * parseInt($(".price", el).val())); $('.total', el).text(total); var action = $(this).attr('data-action'); var target = $(this).attr('data-target'); var id = $(this).attr("data-cart-id"); var value = parseFloat($('[id="' + target + '"]', el).val()); if (action == "plus") { value++; } if (action == "minus") { value--; } $('[id="' + target + '"]', el).val(value) }); }); }); </script> |
min="1" max="10" имеют значения только для поля типа number. А получить значение такого поля ни как текст, без лишних преобразований, это value.valueAsNumber.
|
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> |
Часовой пояс GMT +3, время: 03:57. |