移动端通用的商品购物车添加删除结算模板

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的CSS样式、jQuery元素和必要的JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/shopcar.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/auto-size.js"></script>

页面的body部分，需设置好购物车的商品列表和结算部分的容器，代码如下：

<div class="fix_head">
	<a href="javascript:history.go(-1);" class="back">
		<img src="images/back.jpg">
	</a>
	<p>购物车</p>
	<a href="home.html" class="home">
		<img src="images/home.jpg">
	</a>
</div>
<div class="sc_h"></div>
<div class="lb">
	<div class="check">
		<div class="xz" data="0"></div>
	</div>
	<img src="images/spt.jpg" class="spt">
	<div class="mid">
		<p class="name">韩国正品自然乐园芦荟补水保湿洗面奶男士女控油祛</p>
		<p class="color">颜色:白色</p>
		<div class="jj">
			<span class="jia">-</span>
			<input class="num" value="1">
			<span class="jian">+</span>
		</div>
	</div>
	<div class="jgq">
		<div class="price"><p>￥<span class="pri">10.00</span></p></div>
		<div class="price_de"><p><del>￥30.00</del></p></div>
		<img src="images/del.jpg" class="del">
	</div>
</div>
<div class="lb">
	<div class="check">
		<div class="xz" data="0"></div>
	</div>
	<img src="images/spt.jpg" class="spt">
	<div class="mid">
		<p class="name">韩国正品自然乐园芦荟补水保湿洗面奶男士女控油祛</p>
		<p class="color">颜色:白色</p>
		<div class="jj">
			<span class="jia">-</span>
			<input class="num" value="1">
			<span class="jian">+</span>
		</div>
	</div>
	<div class="jgq">
		<div class="price"><p>￥<span class="pri">11.00</span></p></div>
		<div class="price_de"><p><del>￥30.00</del></p></div>
		<img src="images/del.jpg" class="del">
	</div>
</div>
<div class="lb">
	<div class="check">
		<div class="xz" data="0"></div>
	</div>
	<img src="images/spt.jpg" class="spt">
	<div class="mid">
		<p class="name">韩国正品自然乐园芦荟补水保湿洗面奶男士女控油祛</p>
		<p class="color">颜色:白色</p>
		<div class="jj">
			<span class="jia">-</span>
			<input class="num" value="1">
			<span class="jian">+</span>
		</div>
	</div>
	<div class="jgq">
		<div class="price"><p>￥<span class="pri">12.00</span></p></div>
		<div class="price_de"><p><del>￥30.00</del></p></div>
		<img src="images/del.jpg" class="del">
	</div>
</div>
<div class="fix_bottom">
	<div id="qx" data="0"></div><span style="float:left;line-height:0.8rem;">全选</span>
	<div class="zjq">
	<p class="p1">合计:￥
	<span id="zj" >0</span>
	</p>
	<p>含运费</p>
	</div>
	<a id="js">结算(<span id="zsl">0</span>)</a>
</div>

页面的底部，设置好商品点击事件的响应等，代码如下：

$(function(){
	js();
	$(".xz").click(function(){
		var a = $(this).attr("data");
		if (a==0) {
			$(this).css("background-image","url(images/check_on.jpg)");
			$(this).attr("data",1)
		}else{
			$(this).css("background-image","url(images/check.jpg)");
			$(this).attr("data",0)
			$("#qx").attr("data",0);
			$("#qx").css("background-image","url(images/check.jpg)");
		}
		js();				
		
	})
	$("#qx").click(function(){
		var a = $(this).attr("data");
		if (a==0) {
			$(".xz").attr("data",1);
		$(this).css("background-image","url(images/check_on.jpg)");
		$(".xz").css("background-image","url(images/check_on.jpg)");
		$(this).attr("data",1);
		}else{
			$(".xz").attr("data",0);
		$(this).css("background-image","url(images/check.jpg)");
		$(".xz").css("background-image","url(images/check.jpg)");
			$(this).attr("data",0);
		}
		js();
	})
	$(".jian").click(function(){
		var a = $(this).prev().val();
		a++;
		$(this).prev().val(a);
		js();

	})
	$(".jia").click(function(){
		var a = $(this).next().val();
		a--;
		$(this).next().val(a);
		var a = $(".xz").attr("data");
		if(a==1){
			js();
		}
	})
	$(".del").click(function(){
		$(this).parent().parent().remove();
		js(); 
	})
	/*function js(){

		var num=0;
		var conut=0;

		$(".num").each(function(){

    			var b=$(this).val()
    		var jg=$(this).parent().parent().next().find(".pri").text();

    		conut+=parseInt(b);
    		num+=b*jg;
    	
  		});
  		$('#zj').html(num)
	}*/
	 function js(){

		var num=0;
		var conut=0;
		$(".xz").each(function(){
			if ($(this).attr("data")==1) {
				var b = $(this).parent().next().next().find(".num").val();
				var jg = $(this).parent().next().next().next().find(".pri").text();
				conut+=parseInt(b);
    			num+=b*jg;
			}
		})
		
  		$('#zj').html(num);
  		$('#zsl').html(conut);
	}
})