JS購物車編輯
阿新 • • 發佈：2017-07-10
all 購物 -a oct txt color rem blog 20px
顯現了：第一件商品的加減
顯現了：全選/全不選（使用prop而不是attr）
顯現了：刪除（遮罩層）
未實現：第二件商品的刪除
未實現：小計及應付款額的初始化（寫死的）
計算小數乘法時，要先乘100
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .div1 { border: 1px solid gainsboro; width: 950px; height: 60px; } .div-checkbox, .div-goods, .div-amount, .div-unit-price, .div-price, .div-del { border: 1px solid; width: 60px; height: 20px; padding: 20px; float: left; text-align: center; } .div-price { width: 100px; } .div-goods { width: 140px; } .div-amount { width: 140px; }.div-unit-price { width: 50px; } .div-total-price { border: 1px solid gainsboro; width: 950px; height: 60px; text-align: right; } .div-submit { width: 950px; text-align: right; } div#cover { /*遮罩層*/ position: absolute; top: 0; left: 0; width: 100%; height: 1000px; z-index: 100; display: none; background-color: grey; } div#prompt { /*彈窗*/ border: 2px solid yellow; display: none; position: fixed; top: 100px; left: 500px; z-index: 101; width: 300px; height: 200px; } </style> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script> $(function() { //全選 var i = 0; $(".allPic").click(function() { i++; if (i % 2 != 0) { //此處用attr則只能選中/取消一次 $(".cls-checked").prop("checked", true); } else { $(".cls-checked").prop("checked", false); } }); //通過name獲取某一商品的按鈕 $("input[name=‘btn1‘]").click(function() { //數量 var _amount = parseInt($("#id-txt-amount1").val()); if ($(this).val() == "+") { _amount++; } else if ($(this).val() == "-") { if (_amount == 1) { //必須買! return; } _amount--; } $("#id-txt-amount1").attr("value", _amount); // 本商品的總價 var _unitPrice = $("#id-unit-price1").html(); var _thisPrice = parseFloat(_unitPrice * 100 * _amount / 100).toFixed(2); $("#id-price1").html(_thisPrice); // 總價 var _otherPrice = $("#id-price2").html(); var _totalPrice = parseFloat(_thisPrice + _otherPrice).toFixed(2); $("#id-total-price").html(_totalPrice); }); //刪除一條 $(".div-del a").click(function() { showPrompt(this); }); }); function showPrompt(obj) { $("#cover").css("display", "block"); // 10毫秒內透明度降為0.5 $("#cover").fadeTo(10, 0.5); $("#prompt").css("display", "block"); $("#prompt a").click(function() { $("#cover").css("display", "none"); $("#prompt").css("display", "none"); return; }); $("#prompt input").click(function() { $("#cover").css("display", "none"); $("#prompt").css("display", "none"); $(obj).each(function() { $(obj).parent("div").parent("div").remove(); }); }); } </script> <body> <!--遮罩層--> <div id="cover"></div> <!--彈窗--> <div id="prompt"> <div style="width: 100%;height: 20px;text-align: right;background-color: gray;"> <a href="#">關閉</a> </div> <div style="text-align: center;background-color: white;width: 300px;height: 180px;line-height: 100px;"> 確認刪除嗎？ <br /> <input type="button" value="確定" /> </div> </div> <!--表頭-------------------------------------------------------> <div class="div1"> <div class="div-checkbox"> <input type="checkbox" class="allPic"><b>全選</b></input> </div> <div class="div-goods"><b>項目</b></div> <div class="div-amount"><b>數量</b></div> <div class="div-unit-price"><b>單價</b></div> <div class="div-price"><b>小計</b></div> <div class="div-del"></div> </div> <!--第一行-------------------------------------------------------> <div class="div1"> <div class="div-checkbox"><input type="checkbox" class="cls-checked" /></div> <div class="div-goods"> A </div> <div class="div-amount"> <input type="button" value="-" name="btn1" /> <input type="text" size="2" value="1" id="id-txt-amount1" /> <input type="button" value="+" name="btn1" /> </div> <div class="div-unit-price"> ￥<span id="id-unit-price1">9.90</span> </div> <div class="div-price">￥<span id="id-price1">2.00</span></div> <div class="div-del"><a href="#">刪除</a></div> </div> <!--第二行（未實現加減）-------------------------------------------------------> <div class="div1"> <div class="div-checkbox"><input type="checkbox" class="cls-checked" /></div> <div class="div-goods"> B </div> <div class="div-amount"> <input type="button" value="-" class="btn2" /> <input type="text" size="2" value="1" id="id-txt-amount2" /> <input type="button" value="+" class="btn2" /> </div> <div class="div-unit-price"> ￥<span id="id-unit-price2">2.00</span> </div> <div class="div-price">￥<span id="id-price2">2.00</span></div> <div class="div-del"><a href="#">刪除</a></div> </div> <div class="div-total-price">應付款額： ￥ <span id="id-total-price">11.90</span> </div> <div class="div-submit"> <input type="submit" /> </div> </body> </html>
JS購物車編輯