Увеличить / уменьшить значение value у input
В разделе "корзина" добавленные товары выводятся в таблице.
Напротив каждого товара есть поле (input) в котором отображается количество товаров конкретного наименования. Данные изначально принимают значение 1, могут вписываться вручную, а так же увеличиваться (+) либо уменьшаться (-). <table> <tr> <td> <a class="minus" href="#">-</a> <input type="text" value="1" /> <a class="plus" href="#">+</a> </td> <td> <a class="minus" href="#">-</a> <input type="text" value="1" /> <a class="plus" href="#">+</a> </td> </tr> </table> Я не силен в jquery но смог написать код который работает для всех полей input одновременно.
$(function() {
$('input').each(function() {
$('a.minus').click(function() {
var data = $('input.amount').val();
if(data > 0) {
$('input.amount').val(parseInt(data) - 1);
}
return false
});
$('a.plus').click(function() {
var data = $('input.amount').val();
$('input.amount').val(parseInt(data) + 1);
return false
});
});
});
Мне же нужно чтобы для каждого значения менялись отдельно. Я пробовал через each, но так и не смог справиться. Раньше делал аналогичные задания, но сейчас почемуто не выходит. Помогите пожалуйста. |
Справился :)
$(function() {
$('td').each(function() {
var asd = $(this);
asd.find('a.minus').click(function() {
var data = asd.find('input').val();
if(data > 0) {
asd.find('input').val(parseInt(data) - 1);
}
return false
});
asd.find('a.plus').click(function() {
var data = asd.find('input').val();
asd.find('input').val(parseInt(data) + 1);
return false
});
});
});
|
$(function() {
$('input').each(function() {
var $input = $(this);
$input.prev('a.minus').click(function() {
$input.val ( Math.max( parseInt( $input.val() )--, 0 ) );
return false;
});
$input.next('a.plus', this.parentNode).click(function() {
$input.val ( parseInt( $input.val() )++ );
return false;
});
});
});
|
Подскажите как решить вопрос с вводом текстовых данных и отрицательных чисел? Пока сделал disabled тем самым ограничив ввод данных с клавиатуры, но хотелось бы чтобы пользователь мог вводить сам количество.
|
Справился :)
$("input").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
|
<script>
function check_symbol(event) {
event= event || window.event;
if ((event.keyCode > 57 || event.keyCode <48) && (event.keyCode<35 || event.keyCode>39) && event.keyCode!=8)
return false;
}
</script>
<input onkeydown="return check_symbol(event)">
А ваш вариант не позволит мне стирать введённые цифры и перемещаться по ним стрелками. |
как сделать увеличение на 1
<div class="opt-quontity">
<span class="minus">-</span>
<input type="text" title="<?php echo JText::_('COM_VIRTUEMART_CART_UPDATE') ?>" class="inputbox input-ultra-mini" size="3" maxlength="4" name="quantity" value="<?php echo $prow->quantity ?>" data-vpid="<?php echo $prow->cart_item_id ?>" />
<span class="plus">+</span>
</div> <!-- .opt-quontity -->
<script type="text/javascript" >
jQuery(document).ready(function($) {
$(document).ready(function() {
$('.minus').click(function () {
var $input = $(this).parent().find('input');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.plus').click(function () {
var $input = $(this).parent().find('input');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
});
});
</script>
в корзине увеличивает на количество товаров если 1 товар, то увеличивает input на 1, а если 2 то на 2 единицы... |
Vanilla JS
http://jsfiddle.net/vlasenkofedor/UFmLf/ |
как подключить этот скрипт, подключил но интпутов стало в 2 раза больше)
|
| Часовой пояс GMT +3, время: 20:21. |