Что-то вроде спиннера
Доброе утро, подскажите как реализовать, есть вот такой 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/ |
Цитата:
|
только вот как заставить меняться и value?
|
Цитата:
|
danik.js wrote "Демки: http://jsfiddle.net/trixta/VNuct/"
Через жопу работает. Ставлю маркер на месяц, кручу вверх - шняга наматывает день. Посмотрите в Хроме или в Опере как оно нормально устроено. Я про дату. Кстати, интересная хрень. Да, ОС у меня локализована через CP, ну и браузеры тоже все на оригинальном языке - и это значит мне надо локальную дату показывать в британской манере? Или это не зависит от ОС и браузера? |
Цитата:
Этого достаточно: <div class="qty"> <input type="text" min="0" max="1000000" step="1" > </div> :before и :after изображают кнопки, padding инпута выдвигает валуе чтоб оно кнопками не закрывалось, а обработчик на _инпуте_ тупо замеряет размер прилетевшего элемента и как 2 пальца определяет какая "кнопка" нажата. Берет соответствующий step и, если нажата декрементная делает его унарно негативным. В финале банальное сложение с текущим валуе и клип по min max. |
Цитата:
Цитата:
|
Надо посмотреть умеет ли JQuery форматировать даты. Проблематика там с ограничением - нельзя ввести днюху на 16 лет раньше текущей даты. ;)
|
| Часовой пояс GMT +3, время: 00:44. |