欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

基于JQuery的购物车添加删除以及结算功能示例

程序员文章站 2023-11-29 13:39:58
前段时间了解到购物车结算算是一个难点部分，在网上也找了一些，但是网上除了插件之外，就是一些半成品，比如一部分只有添加删除效果，另一部分只有结算功能，很少见到整合在一起的购物...

前段时间了解到购物车结算算是一个难点部分，在网上也找了一些，但是网上除了插件之外，就是一些半成品，比如一部分只有添加删除效果，另一部分只有结算功能，很少见到整合在一起的购物车效果，因此自己写了一个，方便大家查看
（添加效果没有飞入，实在懒得写动画效果了，凑合看吧）

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">点击购买</p></li> 
      <li num="2"><img src="images/2.jpg"/><span class="things_name">2014年春季爆品b<p>$<i>20</i><span class="buy">点击购买</p></li> 
      <li num="3"><img src="images/3.jpg"/><span class="things_name">2014年春季爆品c<p>$<i>30</i><span class="buy">点击购买</p></li> 
      <li num="4"><img src="images/4.jpg"/><span class="things_name">2014年春季爆品d<p>$<i>40</i><span class="buy">点击购买</p></li> 
    </ul> 
   </div> 
    
   <div id="carlist"> 
    <div class="car"> 
      <div> 
        <span class="carlogo"><span><img src="images/car.png"/> 
        <span class="txt">购<br />物<br />车 
      </div> 
       
    </div> 
    <div class="list"> 
      <!--此处添加动态元素--> 
      <div class="total"> 
        <span>总价：<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 
   } 
 }) 
 
 
 //点击购买按钮添加至购物车 
 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>1<span class="add">+</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") 
     } 
   } 
 } 
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： bootstrap实现动态进度条效果

下一篇： PHP微框架Dispatch简介

推荐阅读