關於購物車，想必在網上購物過的小哥哥小姐姐們都都很清楚，這裏就不瞎扯淡了，嘿嘿！
回顧一下上一次的文章是寫的怎麼實現購物車，比較宏觀的描述了一下實現過程！
這次講解一下里面的功能，一步一步去實現，總不能一口吃個大胖子是吧！
進入正題：使用原生 “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>如果你看了，覺得對你有幫助，那就贊一個吧！嘿嘿，下期見！