如何创建小程序_基于JQuery的购物车添加删除以及

基于JQuery的购物车添加删除以及结算功能示例       本篇文章主要介绍了基于JQuery的购物车添加删除以及结算功能示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

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

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="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" 
 li num="1" img src="images/1.jpg"/ span 2014年春季爆品A p $ i 10 /i span 点击购买 /p /li 
 li num="2" img src="images/2.jpg"/ span 2014年春季爆品B p $ i 20 /i span 点击购买 /p /li 
 li num="3" img src="images/3.jpg"/ span 2014年春季爆品C p $ i 30 /i span 点击购买 /p /li 
 li num="4" img src="images/4.jpg"/ span 2014年春季爆品D p $ i 40 /i span 点击购买 /p /li 
 /ul 
 /div 
 div id="carlist" 
 div 
 div 
 span span img src="images/car.png"/ 
 span 购 br / 物 br / 车 
 /div 
 /div 
 div 
 !--此处添加动态元素-- 
 div 
 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 

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 num='+kNum+' img src='+thingsImage+'/ p '+thingsName+' /p p $ i '+thingsPrice+' /i /p ul li span - span 1 span + /li li 删除 /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; $(".(totalGeshu) } else{ $(".carLogo span").css("display","none") })

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




扫描二维码分享到微信