基于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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
ext读取两种结构的xml的代码
Nov 05 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 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截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
短信提示使用 特效
2007/01/19 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
Java模拟试题
2014/11/10 面试题
质量标语大全
2014/06/12 职场文书
公司踏青活动方案
2014/08/16 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python