本文主要介绍了基于jquery的购物车添加删除以及结算功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
前段时间了解到购物车结算算是一个难点部分，在网上也找了一些，但是网上除了插件之外，就是一些半成品，比如一部分只有添加删除效果，另一部分只有结算功能，很少见到整合在一起的购物车效果，因此自己写了一个，方便大家查看
（添加效果没有飞入，实在懒得写动画效果了，凑合看吧）
HTML部分
nbsp;html>
登录后复制 2014年春季爆品A
$10点击购买
2014年春季爆品B
$20点击购买
2014年春季爆品C
$30点击购买
2014年春季爆品D
$40点击购买
购
物
车
总价：0元
function view(){ return{ w:document.documentElement.clientWidth, h:document.documentElement.clientHeight }; } document.body.style.height=view().h+”px”;
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('![JQuery实现购物车添加删除以及结算功能]()
![JQuery实现购物车添加删除以及结算功能]()
'+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模拟天猫购物车动画效果实例分享
用JavaScript实现简易的购物车实例分享
AngularJS 实现购物车全选反选功能实例分享
以上就是JQuery实现购物车添加删除以及结算功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789567.html
