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


Posted in Javascript onMarch 08, 2017

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

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

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

Javascript 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
学习ExtJS Column布局
Oct 08 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 #Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 #Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 #Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 #Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 #Javascript
JS仿JQuery选择器功能
Mar 08 #Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 #Javascript
You might like
PHP 选项及相关信息函数库
2006/12/04 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python requests库的使用
2021/01/06 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
公务员考察材料范文
2014/12/23 职场文书
网络研修心得体会
2016/01/08 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
Python字符串的转义字符
2022/04/07 Python