基于jQuery的商品购买数量增减效果
商城系统商品数量增减效果。
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery商城商品购买数量增减JS</title> </head> <body> <br /><br /> <?php $goods_stock = '5'; //商品库存 ?> <style> .goods-key { width:600px; margin:20px auto;} .goods-key dl { font-size:0; *word-spacing:-1px/*IE6、7*/;} .goods-key dl dt, .goods-key dl dd { font-size:12px; min-height:20px; line-height:20px; vertical-align:top; letter-spacing:normal; word-spacing:normal; display:inline-block; *display:inline/* IE6,7 */; padding:4px 0; *zoom:1;} .goods-key dl dt { text-align:right; margin-right:1%; } .goods-key dl dd { text-align:left;} /*购买数量和库存*/ .figure-input { position:relative; z-index:1;} .figure-input input { width:30px; height:20px; padding:4px; font:12px/20px Tahoma; color:#777; outline:0 none; border:solid 1px #CCC; } .figure-input a { font:11px/12px sans-serif, serif, Arial; color:#AAA; background-color:#FFF; text-align:center; display:block; width:16px; height:12px; border:solid 1px #CCC; position:absolute; z-index:1; left:42px; -webkit-text-size-adjust:none; text-decoration:none; } .figure-input a:hover { color:#D93600; border-color:#D93600; } .figure-input a.increase { top:4px;} .figure-input a.decrease { top:20px;} .figure-input em { margin-left:30px; color:#999; font-style:normal; } .figure-input em strong { color:#555; vertical-align:middle; margin:0 4px;} </style> <div class="goods-key"> <dl> <dt>购买数量：</dt> <dd class="figure-input"> <input type="text" name="" id="quantity" value="1" size="3" maxlength="6" /> <a href="javascript:void(0)" class="increase">+</a> <a href="javascript:void(0)" class="decrease">-</a> <em>(当前库存<strong nctype="goods_stock"> <?php echo $goods_stock;?></strong> 件)</em> </dd> </dl> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /* 商品购买数量增减js */ // 增加 $('.increase').click(function(){ num = parseInt($('#quantity').val()); //parseInt() 函数可解析一个字符串，并返回一个整数。 <?php if( !empty($goods_stock) ){?> max = <?php echo $goods_stock;?>; if(num >= max){ alert('最多限购'+max+'件'); return false; } <?php } ?> max = parseInt($('[nctype="goods_stock"]').text()); if(num < max){ $('#quantity').val(num+1); } }); //减少 $('.decrease').click(function(){ num = parseInt($('#quantity').val()); if(num > 1){ $('#quantity').val(num-1); } }); }); </script> </body> </html>
