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

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

网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了五指山免费建站欢迎大家使用!

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('

'+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") } } } })

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


本文题目:基于JQuery的购物车添加删除以及结算功能示例
分享URL:http://scyanting.com/article/jppicc.html