快捷導(dǎo)航

基于JQuery的購(gòu)物車(chē)添加刪除以及結(jié)算功能示例

更新時(shí)間：2017年03月08日 09:04:40 作者：zljvsmx

本篇文章主要介紹了基于JQuery的購(gòu)物車(chē)添加刪除以及結(jié)算功能示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

前段時(shí)間了解到購(gòu)物車(chē)結(jié)算算是一個(gè)難點(diǎn)部分，在網(wǎng)上也找了一些，但是網(wǎng)上除了插件之外，就是一些半成品，比如一部分只有添加刪除效果，另一部分只有結(jié)算功能，很少見(jiàn)到整合在一起的購(gòu)物車(chē)效果，因此自己寫(xiě)了一個(gè)，方便大家查看
（添加效果沒(méi)有飛入，實(shí)在懶得寫(xiě)動(dòng)畫(huà)效果了，湊合看吧）

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" rel="external nofollow" > 
   <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<p>$<i>10</i><span class="buy">點(diǎn)擊購(gòu)買(mǎi)</p></li> 
      <li num="2"><img src="images/2.jpg"/><span class="things_name">2014年春季爆品B<p>$<i>20</i><span class="buy">點(diǎn)擊購(gòu)買(mǎi)</p></li> 
      <li num="3"><img src="images/3.jpg"/><span class="things_name">2014年春季爆品C<p>$<i>30</i><span class="buy">點(diǎn)擊購(gòu)買(mǎi)</p></li> 
      <li num="4"><img src="images/4.jpg"/><span class="things_name">2014年春季爆品D<p>$<i>40</i><span class="buy">點(diǎn)擊購(gòu)買(mǎi)</p></li> 
    </ul> 
   </div> 
    
   <div id="carlist"> 
    <div class="car"> 
      <div> 
        <span class="carLogo"><span><img src="images/car.png"/> 
        <span class="txt">購(gòu)<br />物<br />車(chē) 
      </div> 
       
    </div> 
    <div class="list"> 
      <!--此處添加動(dòng)態(tài)元素--> 
      <div class="total"> 
        <span>總價(jià)：<span>0元 
      </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 
   } 
 }) 
 
 
 //點(diǎn)擊購(gòu)買(mǎi)按鈕添加至購(gòu)物車(chē) 
 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("已經(jīng)添加至購(gòu)物車(chē)"); 
       
   $(".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>1<span class="add">+</li><li class="del">刪除</li></ul></div>'); 
   countTotalPrice(); 
   totalGeshu(); 
    
   //點(diǎn)擊加號(hào)添加商品個(gè)數(shù) 
    
   $(".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(); 
   }) 
    
   //動(dòng)態(tài)生成的元素點(diǎn)擊減號(hào)減少商品個(gè)數(shù) 
   $(".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(); 
   }) 
    
   //刪除購(gòu)物車(chē)內(nèi)的商品 
   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("點(diǎn)擊購(gòu)買(mǎi)") 
     }) 
   }) 
 
   //計(jì)算總價(jià)函數(shù) 
   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(); 
   } 
    
   //購(gòu)物車(chē)上的商品總數(shù) 
   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") 
     } 
   } 
 } 
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: