• 欢迎@方程式 @小云 加入我们
  • Register

基于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>
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/1722.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 
我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册