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

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

HTML部分

 
 
 
    
    
    
    
    
    
 
 
    
    
    
 
      
2014年春季爆品A
$10点击购买
 
      
2014年春季爆品B
$20点击购买
 
      
2014年春季爆品C
$30点击购买
 
      
2014年春季爆品D
$40点击购买
 
    
 
    
    
    
     

  
 购
物
车 


     
     
       

 总价：0元 

     
    
    
 
 

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('
'+thingsName+'
$'+thingsPrice+'
-1+
删除
'); 
   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;i0) { 
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") 
     } 
   } 
 } 
}) 

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