基于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 相关文章推荐
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
javascript实现标签切换代码示例
May 22 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 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性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php 常用的系统函数
2017/02/07 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
javascript几个易错点记录
2014/11/26 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Python爬虫与反爬虫大战
2020/07/30 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
群众路线学习笔记范文
2014/11/06 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL
asyncio异步编程之Task对象详解
2022/03/13 Python