jquery实现购物车增加减少购买数量的代码

代码实现的效果点击增加、减少按钮实现购买数量的变动,只允许输入数字,禁止中文、英文或其它符号的输入。

HTML代码:

<div class="book">
	<button class="sub">-</button>
	<input type="text" class="num text" value="100"/>
	<button class="add">+</button>
</div>

CSS代码:

.book{overflow:hidden;}
.book button{display:block;width:50px;height:50px;background:#d9d9d9 no-repeat center center;border:none;float:left;cursor:pointer;}
.book .text{float:left;font-size:16px;color:#666;width:158px;border:1px solid #ededed;height:48px;line-height:48px;text-align:center;}

Jquery代码:

$(function(){
	$('.num').keypress(function(b) {
		var keyCode = b.keyCode ? b.keyCode : b.charCode;
		if (keyCode != 0 && (keyCode < 48 || keyCode > 57) && keyCode != 8 && keyCode != 37 && keyCode != 39) {
			return false;
		} else {
			return true;
		}
	}).keyup(function(e) {
		var keyCode = e.keyCode ? e.keyCode : e.charCode;
		console.log(keyCode);
		if (keyCode != 8) {
			var numVal = parseInt($(this).val()) || 0;
			numVal = numVal < 1 ? 1 : numVal;
			$(this).val(numVal);
		}
	}).blur(function() {
		var numVal = parseInt($(this).val()) || 0;
		numVal = numVal < 1 ? 1 : numVal;
		$(this).val(numVal);
	});

	$('.book button').click(function(){
		var num = parseInt($(this).parent().children('.num').val()) || 0;
		if($(this).attr('class') == 'add'){    		
			num = num + 1;			
		}else{
			num = num - 1;
		}
		$(this).parent().children('.num').val(num);
	});
});
关键词: jQuery