基于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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
url 特殊字符 传递参数解决方法
Jan 01 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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 读取和编写 XML
2014/11/19 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
javascript引导程序
2008/10/26 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
vue-router history模式下的微信分享小结
2018/07/05 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
利用Python破解斗地主残局详解
2017/06/30 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
环保倡议书
2014/04/14 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
项目经理任命书范本
2014/06/05 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
复活读书笔记
2015/06/29 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
python ansible自动化运维工具执行流程
2021/06/24 Python
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android