Оптимизировать инпут-счетчик
Добрый день, на старнице есть инпут счетчик для интернет магазина (укажите количество товаров + и -)
HTML: <div class="input-group spinner"> <input type="text" class="form-control" value="1"> <div class="input-group-btn-vertical"> <button class="btn btn-default" type="button">+</button> <button class="btn btn-default" type="button">–</button> </div> </div> Его я реализовал вот таким Js:
$(document).ready(function ($) {
$('.spinner .btn:first-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
});
$('.spinner .btn:last-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
});
})
Но проблема в том, что этих счетчиков до 10-20 штук на странице, а когда кликаешь, то он изменяет значения во всех инпутах на странице, как-то можно сделать, что бы изменял, только в том инпуте, на котором клик происходит.(и желателно не через id, то можно с ума будет сойти) Заранее спасибо! |
Делегируйте обработку родителю кнопок input-group-btn-vertical, а их индекс в наборе будет определять операцию +/-. Поле ввода легко найти у родителя, хотя для input-group-btn-vertical, это и проще будет - .prev().
|
laimas,
мощно задвинул.... я даже ничего не понял, можно как-то попроще) |
Павел Турченко,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".spinner").each(function(c, b) {
$(b).on("click", ".btn-default", function() {
var a = $(".form-control", b)[0];
$(".btn-default", b).index(this) ? a.value-- : a.value++;
0 > a.value && (a.value = 0)
})
})
});
</script>
</head>
<body>
<div class="input-group spinner">
<input type="text" class="form-control" value="1">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button">+</button>
<button class="btn btn-default" type="button">–</button>
</div>
</div>
<div class="input-group spinner">
<input type="text" class="form-control" value="1">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button">+</button>
<button class="btn btn-default" type="button">–</button>
</div>
</div>
</body>
</html>
|
рони,
большое спасибо! я бы поставил + к карме, но не пускает программа сайта, говорит, что бы я плюсанул кому-то другому.... |
| Часовой пояс GMT +3, время: 03:15. |