Что-то вроде спиннера
Доброе утро, подскажите как реализовать, есть вот такой HTML:
<div id="qty-spinner" class="qty">
<i data-helper="reduce" class="qty__helper reduce"></i>
<input type="text" id="product_qty_{{ item.item.id }}" class="item-qty" value="{{ item.item.quantity }}">
<i data-helper="add" class="qty__helper add"></i>
</div>
В двух словах - этот блок в корзине магазина, он позволяет увеличить кол-во экземпляров товара, либо уменьшить. нужно при клике на <i data-helper="reduce" class="qty__helper reduce"></i>отнять 1 от числа в input, а по клику на <i data-helper="add" class="qty__helper add"></i>соответственно увеличить на 1. Заранее спасибо |
Как вариант...
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
$('.reduce').click(function (){
var o=$(this).next();
var val=parseInt(o.val());
if (val>0) {
o.val(val-1);
};
});
$('.add').click(function (){
var o=$(this).prev();
var val=parseInt(o.val());
o.val(val+1);
});
});
</script>
</head>
<body>
<div id="qty-spinner" class="qty">
<i data-helper="reduce" class="qty__helper reduce">-</i>
<input type="text" id="product_qty" class="item-qty" value="4">
<i data-helper="add" class="qty__helper add">+</i>
</div>
</body>
</html>
</html>
|
Спасибо!
|
ksa,
со всем уважением, но var o=$(this).next(); сломается сразу как добавим элемент, не ? бест практик, что нам говорит кто знает ? Мне в голову приходит только 1 - взять по id или классу (уникальный ввиде .js_blabla) - но если в корзине несколько товаров - они генерируют одинаковый код, что уже не очень 2 - взять родителя и в нем найти нужный инпут, но тут надо следить за тем, чтобы кнопки и инпут были на 1 уровне Кто что скажет ? наверное, есть элегантное решение |
Цитата:
|
ksa,
:lol: ну да)) извратиться можно по-всякому. я просто думал, есть какой-нибудь лучший вариант или паттерн) |
:)
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
$('.qty__helper').click(function (event){
event.stopPropagation();
var o=$(this).siblings('.item-qty');
var val=parseInt(o.val());
val += $(this).hasClass("add") ? 1 : val == 0 ? 0 : -1;
o.val(val);
});
});
</script>
</head>
<body>
<div id="qty-spinner" class="qty">
<i data-helper="reduce" class="qty__helper reduce">-</i>
<input type="text" id="product_qty" class="item-qty" value="4">
<i data-helper="add" class="qty__helper add">+</i>
</div>
</body>
</html>
ksa, а у вас |
Цитата:
Вроде работающий скрипт... |
<!DOCTYPE html>
<input type="number" min="0" value="4" />
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js">
<script>
webshim.polyfill('forms forms-ext');
</script>
|
Кстати, с этой штукой можно вполне использовать HTML5 поля типов date, time, month, color и тд. А также кастомизировать их.
Демки: http://jsfiddle.net/trixta/VNuct/ |
| Часовой пояс GMT +3, время: 20:45. |