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

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

HTML代码:

<div class="buyNum">			
	<a id="sub" href="javascript:void(0);">-</a>
	<input type="text" value="1" id="booknum" class="num"/>
	<a id="add" href="javascript:void(0);">+</a>
</div>

CSS代码:

#sub, #add {width:24px; height:24px; display:block; float:left; border:1px solid #d5d5d5; text-align:center; line-height:24px; font-size:14px; color:#b3b3b3;}
#booknum {display:block; float:left; height:24px; line-height:24px; width:45px; border:1px solid #d5d5d5; text-align:center; color:#7c7c7c; font-size:13px; margin:0 5px;}

Jquery代码:

<script type="text/javascript">
$(function(){	
	$('#booknum').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);
	});
	$(this).find('#add').click(function(){
		var num = parseInt($(this).parent().find("#booknum").val()) || 0;
		num = num + 1;
		$(this).parent().find("#booknum").val(num);
	});
	$(this).find('#sub').click(function(){
		var num = parseInt($(this).parent().find("#booknum").val()) || 0;
		num = num - 1;
		num = num < 1 ? 1 : num;
		$(this).parent().find('#booknum').val(num);
	});
});
</script>
关键词: jQuery

网友留言(0条)

发表评论