jQuery仿外賣訂餐購物車代碼



60 238 80



特效描述:jQuery 仿外賣訂餐 購物車代碼,jQuery仿外賣訂餐購物車代碼

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代碼

<div class="main">
	<div class="left-menu">
		<ul>  
           <li class="active">營養套餐<span class="num-price"></span></li>  
           <li>酒水飲料</li>  
           <li>酒水飲料</li>  
           <li>酒水飲料</li> 
		   <li>酒水飲料</li>  
           <li>酒水飲料</li>  
           <li>酒水飲料</li> 
		   <li>酒水飲料</li>  
           <li>酒水飲料</li>  
           <li>酒水飲料</li> 
		   <li>酒水飲料</li>  
           <li>酒水飲料</li>  
           <li>酒水飲料</li>  
        </ul> 
	</div>
	<div class="con">
		<div class="right-con con-active">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>宮保雞丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>宮保雞丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>宮保雞丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>宮保雞丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con">
			<ul>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="img/pic.png" width="55" height="55" /></div>
					<div class="menu-txt">
						<h4>京醬肉絲</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>¥25</b>
							<div class="btn">  
								 <button class="minus">  
									 <strong></strong>  
								 </button>  
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="footer">  
		<div class="left">已選:
		<span id="cartN">
			<span id="totalcountshow">0</span>份 總計:¥<span id="totalpriceshow">0</span></span>元  
		</div>  
		<div class="right">  
			<a id="btnselect" class="xhlbtn  disable" href="javascript:void(0)">去結算</a>  
		</div>   
	</div>
</div>
<script type="text/javascript">
$(function () {  
	//加的效果  
	$(".add").click(function () {  
		$(this).prevAll().css("display", "inline-block");  
		var n = $(this).prev().text();  
		var num = parseInt(n) + 1;  
		if (num == 0) { return; }  
		$(this).prev().text(num);  
		var danjia = $(this).next().text();//獲取單價  
		var a = $("#totalpriceshow").html();//獲取當前所選總價  
		$("#totalpriceshow").html((a * 1 + danjia * 1).toFixed(2));//計算當前所選總價  
		var nm = $("#totalcountshow").html();//獲取數量  
		$("#totalcountshow").html(nm*1+1);  
		jss();//<span style='font-family: Arial, Helvetica, sans-serif;'></span>   改變按鈕樣式
	});  
	//減的效果  
	$(".minus").click(function () {  
		var n = $(this).next().text();  
		var num = parseInt(n) - 1;  
		$(this).next().text(num);//減1  
		var danjia = $(this).nextAll(".price").text();//獲取單價  
		var a = $("#totalpriceshow").html();//獲取當前所選總價  
		$("#totalpriceshow").html((a * 1 - danjia * 1).toFixed(2));//計算當前所選總價  
		var nm = $("#totalcountshow").html();//獲取數量  
		$("#totalcountshow").html(nm * 1 - 1);  
		//如果數量小于或等于0則隱藏減號和數量  
		if (num <= 0) {  
			$(this).next().css("display", "none");  
			$(this).css("display", "none");  
			jss();//改變按鈕樣式  
			 return  
		}  
	});  
	function jss() {  
		var m = $("#totalcountshow").html();  
		if (m > 0) {  
			$(".right").find("a").removeClass("disable");  
		} else {  
		   $(".right").find("a").addClass("disable");  
		}  
	};
	//選項卡
	$(".con>div").hide();
	$(".con>div:eq(0)").show();	
	$(".left-menu li").click(function(){
		$(this).addClass("active").siblings().removeClass("active");
		var n = $(".left-menu li").index(this);
		$(".left-menu li").index(this);
		$(".con>div").hide();
		$(".con>div:eq("+n+")").show();	
	});
});  
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 選項卡自動切換 購物車
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子