聯動的購物車程式碼
阿新 • • 發佈：2018-12-29
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="description" content=""> <meta name="author" content="ThemeBucket"> <link rel="shortcut icon" href="#" type="image/png"> <title></title> <style type="text/css"> html { font-family: "微軟雅黑", "microsoft yahei", sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 14px; } body { margin: 0; line-height: 1.8;} .model-list{width: 250px;height: 200px; border: 1px solid #ddd;display: inline-block;padding:10px;} .list-name{} .list-price{} .list-btn-cart{} .list-edit{display: none;} .minus{width: 23px;height: 23px;display: inline-block;border: 1px solid #ddd;text-align: center; cursor: pointer; background: #fff;} .num{width: 23px;height: 23px;display: inline-block;border: 1px solid #ddd; text-align: center; background: #fff;} .add{width: 23px;height: 23px;display: inline-block;border: 1px solid #ddd;text-align: center; cursor: pointer; background: #fff;} .list-box{border-bottom: 1px solid #ddd; padding:15px;} .display-block{display: block;} .display-inline-block{display: inline-block;} .fixed-width{width: 150px; display: inline-block;} .text-right{text-align: right;} .cart-list{} .total-box{border-bottom: 1px solid #ddd; padding:15px;} </style> </head> <body> <div class="content-box"> <div class="model-list list1"> <div class="list-name">1name</div> <div class="list-price">2</div> <button class="list-btn-cart" data-id="list1" data-price="2">點選</button> <div class="list-edit"> <button class="minus" data-id="list1" data-price="2">-</button> <span class="num">1</span> <button class="add" data-id="list1" data-price="2">+</button> </div> </div> <div class="model-list list2"> <div class="list-name">1name</div> <div class="list-price">0.11</div> <button class="list-btn-cart" data-id="list2" data-price="0.11">點選</button> <div class="list-edit"> <button class="minus" data-id="list2" data-price="0.11">-</button> <span class="num">1</span> <button class="add" data-id="list2" data-price="0.11">+</button> </div> </div> </div> <div> <div class="list-box"> </div> <div class="total-box"> <div> 數量 : <span id="copies"></span> 總計 : <span id="total""></span> </div> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(".list-btn-cart").on("click",function(){ var listId = $(this).attr("data-id"); //可作為id的動態class var listPrice = $(this).attr("data-price"); //可作為list的動態價格 $(this).css("display","none"); //可編輯的區域 $("."+listId).find(".list-edit").css("display","block"); $("."+listId).find(".num").text(1); //list-box加入 var html ='<div class="cart-list '+listId+'">'+ '<span class="list-name fixed-width">'+listId+'name</span>'+ '<span class="list-edit display-inline-block">'+ '<button class="minus" data-id="'+listId+'" data-price="'+listPrice+'">-</button>'+ '<span class="num">1</span>'+ '<button class="add" data-id="'+listId+'" data-price="'+listPrice+'">+</button>'+ '</span>'+ '<span class="list-subtotal fixed-width text-right">'+listPrice+'</span>'+ '</div>'; $(".list-box").append(html); totalPrice(); }) //計算總價 function totalPrice(){ var copies = 0; var total = 0; $(".list-box .cart-list").each(function(){ copies = copies + parseInt($(this).find(".num").text()); $("#copies").text(copies); total = total + parseFloat($(this).find(".list-subtotal").text()); $("#total").text(total.toFixed(2)); }) } //加 $(document).on('click', '.add', function(){ var listId = $(this).attr("data-id"); //可作為id的動態class var listPrice = $(this).attr("data-price"); //可作為list的動態價格 var amount = parseInt($(this).prev(".num").text()); amount=amount+1; $("."+listId).find(".num").text(amount); var subtotal = amount * listPrice; $("."+listId).find(".list-subtotal").text(subtotal); totalPrice(); }) //減 $(document).on('click', '.minus', function(){ var listId = $(this).attr("data-id"); //可作為id的動態class var listPrice = $(this).attr("data-price"); //可作為list的動態價格 var amount = parseInt($(this).next(".num").text()); var subtotal; if (amount>1) { amount=amount-1; $("."+listId).find(".num").text(amount); subtotal = amount * listPrice; $("."+listId).find(".list-subtotal").text(subtotal); totalPrice(); }else{ $("."+listId).find(".num").text(0); $("."+listId).find(".list-subtotal").text(0); totalPrice(); $(".content-box ."+listId).find(".list-edit").css("display","none") $(".content-box ."+listId).find(".list-btn-cart").css("display","block"); $(".list-box ."+listId).remove(); } }) </script> </body> </html>