Как работать с циклом?
<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, время: 05:51. |