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); }); });
下一篇 >>