基於JQuery的購物車新增刪除以及結算功能
阿新 • • 發佈：2019-01-26
前段時間瞭解到購物車結算算是一個難點部分，在網上也找了一些，但是網上除了外掛之外，就是一些半成品，比如一部分只有新增刪除效果，另一部分只有結算功能，很少見到整合在一起的購物車效果，因此自己寫了一個，方便大家檢視
（新增效果沒有飛入，實在懶得寫動畫效果了，湊合看吧）
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="css/index.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/index.js" type="text/javascript" charset="utf-8" async defer></script> </head> <body> <div id="banner"></div> <div id="container"> <ul> <li num="1"><img src="images/1.jpg"/><span class="things_name">2014年春季爆品A</span><p>$<i>10</i><span class="buy">點選購買</span></p></li> <li num="2"><img src="images/2.jpg"/><span class="things_name">2014年春季爆品B</span><p>$<i>20</i><span class="buy">點選購買</span></p></li> <li num="3"><img src="images/3.jpg"/><span class="things_name">2014年春季爆品C</span><p>$<i>30</i><span class="buy">點選購買</span></p></li> <li num="4"><img src="images/4.jpg"/><span class="things_name">2014年春季爆品D</span><p>$<i>40</i><span class="buy">點選購買</span></p></li> </ul> </div> <div id="carlist"> <div class="car"> <div> <span class="carLogo"><span></span><img src="images/car.png"/></span> <span class="txt">購<br />物<br />車</span> </div> </div> <div class="list"> <!--此處新增動態元素--> <div class="total"> <span>總價：</span><span>0</span>元 </div> </div> </div> <script type="text/javascript"> function view(){ return{ w:document.documentElement.clientWidth, h:document.documentElement.clientHeight }; } document.body.style.height=view().h+"px"; </script> </body> </html>
JS部分$(function(){ var mark=0; $(".car").on("click",function(){ if(mark==0){ $("#carlist").animate({marginRight:"0px"},500) mark=1; }else{ $("#carlist").animate({marginRight:"-260px"},500) mark=0 } }) //點選購買按鈕新增至購物車 var buyButton=$(".buy"); buyButton.on("click",BuyClick) function BuyClick(){ var thingsName=$(this).parents("li").find(".things_name").text(); var thingsPrice=$(this).parent().find("i").text(); var thingsImage=$(this).parents("li").find("img").attr("src"); var kNum=$(this).parents("li").attr("num") var Geshu=1; $(this).off("click").text("已經新增至購物車"); $(".list").append('<div class="select things" num='+kNum+'><img src='+thingsImage+'/><p class="name">'+thingsName+'</p><p class="price">$<i>'+thingsPrice+'</i></p><ul class="caozuo"><li class="zengjian"><span class="minus">-</span><span>1</span><span class="add">+</span></li><li class="del">刪除</li></ul></div>'); countTotalPrice(); totalGeshu(); //點選加號新增商品個數 $(".add").off("click").on("click",function(){ Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text()) Geshu++ $(this).parent().find("span:nth-of-type(2)").text(Geshu) countTotalPrice(); totalGeshu(); }) //動態生成的元素點選減號減少商品個數 $(".minus").off("click").on("click",function(){ Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text()); if(Geshu>1){ Geshu--; $(this).parent().find("span:nth-of-type(2)").text(Geshu) }else{ Geshu==1; } countTotalPrice(); totalGeshu(); }) //刪除購物車內的商品 var del=$(".del"); del.each(function(){ $(this).off("click").on("click",function(){ var delName=$(this).parents(".things").find(".name").text(); $(this).parents(".things").remove(); countTotalPrice(); totalGeshu(); var oldBtn=$("#container ul li").find("span:contains("+delName+")").parents("li").find(".buy") oldBtn.on("click",BuyClick).text("點選購買") }) }) //計算總價函式 function countTotalPrice(){ var totalPrice=0,listThings=$(".list").find(".things"); for (var i=0;i<listThings.length;i++) { var this_geshu=parseInt(listThings.eq(i).find(".zengjian span:nth-of-type(2)").text()); var this_price=parseInt(listThings.eq(i).find(".price i").text()); totalPrice+=this_geshu*this_price; } $(".total span").eq(1).text(totalPrice); totalGeshu(); } //購物車上的商品總數 function totalGeshu(){ var listThings=$(".list").find(".things"); if (listThings.length>0) { var totalGeshu=0; listThings.each(function(){ var this_geshu=parseInt($(this).find(".zengjian span:nth-of-type(2)").text()); totalGeshu+=this_geshu; }) $(".carLogo span").html(totalGeshu) } else{ $(".carLogo span").css("display","none") } } } })