購物車 如何實現數量增加，小計，合計，總數JSP中頁面的變化
阿新 • • 發佈：2019-01-31
樣式的調節：
<style> div.cartDiv { max-width: 1013px; margin: 10px auto; color: black; } table.cartProductTable { width: 100%; font-size: 12px; } tr.cartProductItemTR { border: 1px solid #CCCCCC; } tr.cartProductItemTR td { padding: 20px 20px; } table.cartProductTable th { font-weight: normal; color: #3C3C3C; padding: 20px 20px; } img.cartProductImg { padding: 1px; border: 1px solid #EEEEEE; width: 80px; height: 80px; } table.cartProductTable th.selectAndImage { width: 100px; } div.cartProductLinkOutDiv { position: relative; } a.cartProductLink { color: #3C3C3C; } a.cartProductLink:hover { color: #C40000; text-decoration: underline; } div.cartProductLinkInnerDiv { position: absolute; bottom: 0; height: 20px; } span.cartProductItemPrice { color: #9C9C9C; display: block; font-size: 14px; } span.cartProductItemPromotionPrice { font-family: Arial; font-size: 14px; font-weight: bold; color: #C40000; } div.cartProductChangeNumberDiv { border: solid 1px #E5E5E5; width: 80px; } div.cartProductChangeNumberDiv a { width: 14px; display: inline-block; text-align: center; color: black; text-decoration: none; } div.cartProductChangeNumberDiv input { border: solid 1px #AAAAAA; width: 23px; display: inline-block; } span.cartProductItemSumPrice { font-family: Arial; font-size: 14px; font-weight: bold; color: #C40000; } img.cartProductItemIfSelected, img.selectAllItem { cursor: pointer; } <!-- 結算按鈕-->body { font-size: 12px; font-family: Arial; } div.cartDiv { max-width: 1013px; margin: 10px auto; color: black; } div.cartTitle button { background-color: #AAAAAA; border: 1px solid #AAAAAA; color: white; width: 53px; height: 25px; border-radius: 2px; } span.cartTitlePrice { color: #C40000; font-size: 14px; font-weight: bold; margin-left: 5px; margin-right: 3px; } div.cartFoot { background-color: #E5E5E5; line-height: 50px; margin: 20px 0px; color: black; padding-left: 20px; } div.cartFoot button { background-color: #AAAAAA; border: 0px solid #AAAAAA; color: white; height: height%; width: 120px; height: 50px; font-size: 20px; text-align: center; } span.cartSumNumber { color: #C40000; font-weight: bold; font-size: 16px; } span.cartSumPrice { color: #C40000; font-weight: bold; font-size: 20px; } </style>
body裡的程式碼
<form id="jiesuan" method="post" action="car" > <div class="cartDiv"> <div class="cartProductList"> <c:if test="false"> <h1>你未購買任何產品</h1> </c:if> <%--如果購物車有購物項，就應該把購物項的資訊顯示給使用者--%> <table class="cartProductTable" id="list"> <thead> <tr> <th>產品圖片</th> <th>商品資訊</th> <th>單價</th> <th>數量</th> <th width="120px">金額</th> <th>操作</th> </tr> </thead> <tbody> <!-- 迴圈遍歷商品 --> <c:forEach items="${resultInfo.result }" var="item"> <tr> <!-- 此處是購物車顯示圖片 --> <td><img width="40px" src="#" class="cartProductImg">${item.productImage}</td> <td> <div class="cartProductLinkOutDiv">${item.productName}</div> </td> <td><span class="cartProductItemPrice" id="5">${item.price}</span> <strong>￥</strong> </td> <td> <!-- 選擇數量 ${item.productNum*item.price} 隱藏庫存--> <div class="cartProductChangeNumberDiv"> <input type="hidden" name="action" value="updateInfo"> <input type="button" name="minus" value="-"class="numberMinus" /> <input type="text" name=${carListId }) value=${item.productNum } class="textNum" style=" text-align: center;" /> <!-- 應該限制庫存 ，未做--> <input type="button" name="add" value="+" class="numberPlus" /> </div> </td> <td><span class="cartProductItemSumPrice">${item.price*item.productNum}</span><strong>￥</strong> </td> <td><button onclick="deleteInfo()">刪除</button></td> </tr> </c:forEach> </tbody> </table> </div> <div class="cartFoot"> <img class="selectAllItem"> <div class="pull-right"> <span>已選商品 <span class="cartSumNumber" id="cartSumNumber">0</span> 件 </span> <span>合計 : </span><span class="cartSumPrice" id="Sum"> ￥0.00</span> <button class="createOrderButton" style="background-color: rgb(170, 170, 170);" onclick="return orderInfo()" >結算</button> </div> </div> </div> </form>
引入的外部檔案：
<link href="static/css/cartStyle.css" rel="stylesheet">
<script src="static/sweetalert/sweetalert2.min.js"> </script>
<link type="text/css" rel="stylesheet"
href="static/js/sweetalert2.min.css" />
<script src="static/js/jquery.min.js"></script>
用js操作：
//減號操作 $(".numberMinus").click(function () { var num = $(this).siblings(".textNum").val(); //獲取數量框裡的數值 //單價的值 var productPrice=$(this).parent().parent().prev().children("span").text(); num--; //單擊“-”減號時，數量遞減 if(num<=0){ $(this).prop("disabled", true); } $(this).siblings(".textNum").val(num); //把數量變化後的新值放入數量框中 //小計的值 $(this).parent().parent().next().children("span").text(num*productPrice); totalPrice(); //呼叫總價方法 totalNum(); //合計數 }) //加號操作 $(".numberPlus").click(function(){ var num = $(this).siblings(".textNum").val(); //獲取數量框裡的數值 //單價的值 var productPrice=$(this).parent().parent().prev().children("span").text(); num++; //單擊“+”減號時，數量遞減 if(num>0){ $(this).siblings(".numberMinus").prop("disabled", false); } $(this).siblings(".textNum").val(num); //把數量變化後的新值放入數量框中 //小計的值 $(this).parent().parent().next().children("span").text(num*productPrice); totalPrice(); //呼叫總價方法 totalNum(); //合計數 }) //計算總價方法 function totalPrice(){ //計算總價，編寫總價方法 var zong = 0; $(".cartProductItemSumPrice").each(function () { var all = parseInt($(this).text()); zong += all; }) $("#Sum").text(zong); } //計算數量方法 function totalNum(){ //計算總價，編寫總價方法 var sumNum = 0; $(".textNum").each(function () { var all = parseInt($(this).val()); sumNum += all; }) $("#cartSumNumber").text(sumNum); } //載入頁面時，呼叫總價方法 $(function(){ totalNum(); totalPrice(); //呼叫總價方法 }) function deleteInfo(){ swal({title: "刪除提示", //彈出框的title text: "確定刪除嗎？", //彈出框裡面的提示文字 type: "warning", //彈出框型別 showCancelButton: true, //是否顯示取消按鈕 confirmButtonColor: "#DD6B55",//確定按鈕顏色 cancelButtonText: "取消",//取消按鈕文字 confirmButtonText: "是的，確定刪除！"//確定按鈕上面的文件 }).then(function(isConfirm) { if (isConfirm) { window.location="car?action=delete&userId=1&carListId=1&productId=1"; } }); }
技術難點：
jqery中siblings方法是遍歷同級元素，剛開始的時候沒有理解，獲取單價的時候沒有獲取到，需要.parent().parent()找到外部td，通過prev()找到上一級的td，單價在td裡面，children（“span”）標籤，.text獲取到值，同理小計也是，因為這是JSTL迴圈遍歷出來的，但是下面統計數量和總價不是迴圈出來，可以設定特有的id，直接通過（“#id”）.val()設定值和獲取值，
$(".cartProductItemSumPrice").each(function () {
var all = parseInt($(this).text());
zong += all;
})
$("#Sum").text(zong);each方法遍歷，直接取值
疑問：當產品數量變化，後臺怎麼獲取對應的產品Id和數量的變化，存取到資料庫，以及刪除的操作