关于购物车，想必在网上购物过的小哥哥小姐姐们都都很清楚，这里就不瞎扯淡了，嘿嘿！
回顾一下上一次的文章是写的怎么实现购物车，比较宏观的描述了一下实现过程！
这次讲解一下里面的功能，一步一步去实现，总不能一口吃个大胖子是吧！
进入正题：使用原生 “js“ 计算购物车 商品及会员总价
- 首先看一下图要实现什么样的功能！
- 动态计算商选中的商品数量
- 数量的加减操作框
- 选中商品计算商品总价 与 会员总价
- 删除选中的商品
- 下面看实现原理：
- 动态计算商选中的商品数量：使用下面这端代码判断是否选中，将其选中的数量用 length 拿到赋值给标签就好了
var proNmCheck = $('input[name="boxPid"]:checked'); $("你自己的商品数量标签").html(proNmCheck.length);
- 数量加减操作：很简单，直接写个操作数量的接口，将其 value 传入即可，方法太多，自己琢磨
- 动态计算总价：这里有两个价，一个商品总价，一个会员价，其实都一样不难，只要在 checkbox 中放入 商品价格、会员价格及数量就行，但要怎么放呢？当然是用 $( ).attr( )啦！然后使用$( ).each(function(index, value){}方法将其放入的属性值循环出来在计算便可，还不懂吗？看下面代码！在不懂，那可以看后面源码！在不懂，那我就没办法了，来问我吧！嘻嘻
$("[name=boxPid]:checked").each(function(i, e){ var price = $(e).attr("price"); var pv = $(e).attr("pv"); var quantity = $(e).attr("num"); priceCount=priceCount+(price*quantity); pvCount=pvCount+(pv*quantity); });
- 多选删除：其实很简单，将选中的商品获取到商品的“ID” value ，然后将其存入数组中，传入后台直接值循环提取即可
- 上面讲了原理：看一下源码吧！
js实现方法： <div class="product_list"> <p>购物车</p> <input type="hidden" id="cartId" value="${cartId}"> <div class="product"> <div class="product_top"> <div class="product_left">商品</div> <div class="product_center">价格</div> <div class="product_right">数量</div> <div class="clear"></div> </div> <!-- 多个商品，循环product_middle --> <c:forEach items="${proMust}" var="pro"> <div class="product_middle"> <div class="product_left" > <input type="checkbox" id="box${pro.pid }" name="boxPid" value="${pro.cartid }" pv="${pro.pv}" price="${pro.unit_price}" οnclick="checkBox(${pro.pid });" /> <a href="javascript:void(0);"> <div style="width: 100px;height: 100px;"> <img alt="加载中..."src="${pro.thumbnail}"> </div> </a> <div class="product_left2" style="margin-left: 250px;"> <p style="margin-left: 40px;width: 300px;">${pro.product_name}</p> <input type="hidden" id="propv${pro.pid }" value="${pro.pv}"> <input type="hidden" id="unit_price${pro.pid }" value="${pro.unit_price}"> <p> <span class="money_span" style="margin-left: 40px;">￥${pro.unit_price }</span> <c:if test="${currentUser.sys_role == 2}"> <span style="margin-left: 40px;">PV:${pro.pv }</span> </c:if> <c:if test="${currentUser.sys_role == 1}"> <span style="margin-left: 40px;">PV:${pro.pv }</span> </c:if> </p> </div> </div> <div class="" style="margin-left: 620px;"> <a class="decrease" id="increase${pro.pid}" οnclick="reduceSum(${pro.pid})">-</a> <input class="text_box" name="num${pro.pid}" type="text" id="num${pro.pid}" value="${pro.quantity}"> <a class="increase" id="reduceSum${pro.pid}" οnclick="plusSum(${pro.pid})">+</a> </div> </div> </c:forEach> <div class="count_bottom"> <div class="left"> <!-- <span><input type="checkbox" style="margin-right: 10px;" name="allcheckbox" οnclick="allcheckBox()"/>全选</span> --> <span><button οnclick="deleteAllOrder()" style="height:65px;background-color: #000;color: #fff;border: 1px solid #000;float:left;">删除选中的商品</button></span> </div> <div class="right"> <span>已选择<label class="label_price" id="shopSum">0</label>件商品 </span> <span> <p id="pid1"> 总合计： <labe id="proCountPrice" class="label_price">￥0</label> </p> <c:if test="${currentUser.sys_role == 1}"> <p> 总合计PV：<label class="label_price" id="pvCoutPrice">0</label> </p> </c:if> <c:if test="${currentUser.sys_role == 2}"> <p> 总合计PV：<label class="label_price" id="pvCoutPrice">0</label> </p> </c:if> </span> <span class="black_btn_2" style="margin-right: 0px;" οnclick="orderSubmit()">提交订单</span> </div> <div class="clear"></div> </div> </div> </div> <form action="${APP_PATH}/jewelry/orderSubmitList.do?type=cart" method="post"> <input type="hidden" name="data" value=""> <input type="hidden" name="datanum" value=""> </form> <script type="text/javascript"> //var datas = new Array();//取出来的ID拼接后传回后台 $(document).ready(function(){ if($("#cartId").val()!="" && $("#cartId").val()!=null){ alert($("#cartId").val()); } }); //选中box function checkBox(pid) { //公共计算 publicComputing(pid); //选中数量 var proNmCheck = $('input[name="boxPid"]:checked'); $("#shopSum").html(proNmCheck.length); var checkPids = "";//得到pid值 var numShopCat=document.getElementsByName("num"+pid); for (var j= 0; j < proNmCheck.length;j++) { checkPids += $(proNmCheck[j]).val()+","; } $("[name=data]").val(checkPids); $("[name=datanum]").val(numShopCat); } function publicComputing(pid){ //计算总价格与总pv var priceCount=0; var pvCount=0; var sum = $("#num" + pid).val(); $("#box"+pid).attr("num",sum); $("[name=boxPid]:checked").each(function(i, e){ var price = $(e).attr("price"); var pv = $(e).attr("pv"); var quantity = $(e).attr("num"); priceCount=priceCount+(price*quantity); pvCount=pvCount+(pv*quantity); }); $("#proCountPrice").html("￥" + priceCount); $("#pvCoutPrice").html("" + pvCount); } //加数量 function plusSum(pid) { var num = $("#num" + pid).val(); if (num != null && num != "") { num = parseInt(num); $("#num" + pid).val(num + 1); } else { num = 0; $("#num" + pid).val(num + 1); } $.ajax({ type:"post", url:"${APP_PATH}/jewelry/plusSum.do", data:{"sum":num+1,"pid":pid}, dataType:"json", success:function(data){ if(data){ return; } } }); } //减数量 function reduceSum(pid) { var num = $("#num" + pid).val(); if (num != "" && num != null) { num = parseInt(num); if(num>0){ $("#num" + pid).val(num - 1); }else{ num=0; $("#num" + pid).val(num); } } else { num = 0; $("#num" + pid).val(mun - 1); } if(num!=0){ $.ajax({ type:"post", url:"${APP_PATH}/jewelry/plusSum.do", data:{"sum":num-1,"pid":pid}, dataType:"json", success:function(data){ if(data){ return; } } }); } } function orderSubmit(pid) { var proNmCheck = $('input[name="boxPid"]:checked'); if(proNmCheck.length>0){ $("form").submit(); }else{ alert("您还未选择商品！"); return; } } var all_oid=""; var deleteType=0; //全选 function allcheckBox(){ deleteType=1; //判断选择没有 var allchecke = $('input[name="allcheckbox"]:checked'); if(allchecke.length==0){ var checkList =document.getElementsByName("boxPid"); for(var i = 0; i<checkList.length; i++) { checkList[i].checked = false; } all_oid=""; //选中数量 var proNmCheck = $('input[name="boxPid"]:checked'); $("#shopSum").html(proNmCheck.length); }else{ //全选 var checkList =document.getElementsByName("boxPid"); for(var i = 0; i<checkList.length; i++) { checkList[i].checked = true; all_oid+=$(checkList[i]).val()+","; } var proNmCheck = $('input[name="boxPid"]:checked'); $("#shopSum").html(proNmCheck.length); } } function deleteAllOrder(){ //判断是全选删除还是选中删除 if(deleteType!=1){ //得到选中的值 var proNmCheck = $('input[name="boxPid"]:checked'); for (var j= 0; j < proNmCheck.length;j++) { all_oid += $(proNmCheck[j]).val()+","; } } $.ajax({ type:"post", url:"${APP_PATH}/jewelry/delteAllOrder.do?all_order="+all_oid, dataType:"json", success:function(data){ if(data.success){ location.href = "${APP_PATH}/jewelry/proshopCat.do"; } } }); } //alert样式 function alert(e){ $("body").append("<div id='msg'><span>"+e+"</span></div>"); clearmsg(); } function clearmsg(){ var t = setTimeout(function(){ $("#msg").remove(); },2000); }; </script>如果你看了，觉得对你有帮助，那就赞一个吧！嘿嘿，下期见！