纯jquery实现模仿淘宝购物车结算


Posted in Javascript onAugust 20, 2015

这篇文章里,将会提到购物车里的所有功能。包括全选、单选金额改变。在增加数量时金额也会相应改变。

效果图展示:

纯jquery实现模仿淘宝购物车结算

说下大致的思路吧:

1、首先是计算一行的价格。这个功能在上篇博客里有提到,这里就不列举出来了。

2、遍历选中的几行,将每行的数值相加。

3、将值赋给总金额显示出来。当取消勾选或加减数量时,金额会相应改变。

下面是具体的js部分:

<script type="text/javascript">
  $(function(){
    //计算总金额
    function totalMoney(){
      var total_price = 0;
      var total_count = 0;
      $(".d1-input").each(function(){
        if($(this).hasClass('status')) {
          var obj1 = $(this).parent().siblings(".d4").find(".count").val();//获取一行的商品数量
          total_count += parseInt(obj1);
          var obj2= $(this).parent().siblings(".d5").find(".cart-price").text();//获取一行的金额
          total_price += parseInt(obj2);
        }
      });
      $(".item").text(total_count);//将计算出的总金额显示
      $(".total").text(total_price);//将计算出的总数量显示
    }
    //全选
    $(".d-input").toggle( function(){
      $(this).addClass("status");
      $(".sc-mid-list .d1-input").addClass("status");//添加勾选样式
      $(".sc-mid-list").addClass("mouseover");
      totalMoney();
      },
      function(){
      $(this).removeClass("status");
      $(".sc-mid-list .d1-input").removeClass("status");//取消勾选样式
      $(".sc-mid-list").removeClass("mouseover");
      totalMoney();
    });
    // 单选
    $(".d1-input").toggle( function(){
      $(this).addClass("status");//添加勾选样式
      $(this).parents(".sc-mid-list").addClass("mouseover");
      totalMoney();
      },
      function(){
      $(this).removeClass("status");//取消勾选样式
      $(this).parents(".sc-mid-list").removeClass("mouseover");
      totalMoney();
    });
    // 减号样式
    function count(){
      $(".count").each(function(){
        var num = $(this).val();
        if (num == 1) {
          $(this).siblings(".reduce").removeClass("two").addClass("one");
          $(this).siblings(".reduce").attr("disabled","disabled");
        } else {
          $(this).siblings(".reduce").removeClass("one").addClass("two");
        }
      })//根据数量是否为1,改变减号的样式
    }
    // 加
    $(".sc-mid-list .add").click(function(){
      var input = $(this).siblings(".count");
      var obj = $(this).parents(".d4");
      var per = parseFloat(obj.siblings(".d3").find(".per").text());//获取当前一行的单价
      var num = '';
      var price = '';
      input.attr("value", parseInt(input.attr("value")) + 1 );//数量加1
      num = input.attr("value");
      price = num*per;//
      obj.siblings(".d5").find(".cart-price").text(price);
      count();
      totalMoney();
    })
    // 减
    $(".sc-mid-list .reduce").click(function(){
      var input = $(this).siblings(".count");
      var obj = $(this).parents(".d4");
      var per = parseFloat(obj.siblings(".d3").find(".per").text());//获取当前一行的单价
      var num = '';
      var price = '';
      var Val = parseInt(input.attr("value"));
      if(Val <= 1){
        Val = 2;
        }
      input.attr("value", parseInt(Val) - 1 );//数量减1
      num = input.attr("value");
      price = num*per;//
      obj.siblings(".d5").find(".cart-price").text(price);
      count();
    })
  })
</script>

jquery模仿淘宝悬挂购物车物品结算功能-附源码下载

纯jquery实现模仿淘宝购物车结算

查看演示    源码下载

Javascript 相关文章推荐
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
有关Promises异步问题详解
Nov 13 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
js实现按钮颜色渐变动画效果
Aug 20 #Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 #Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 #Javascript
jQuery超赞的评分插件(8款)
Aug 20 #Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 #Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 #Javascript
js实现文字在按钮上滚动的方法
Aug 20 #Javascript
You might like
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
popdiv
2006/07/14 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python 表格打印代码实例解析
2019/10/12 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
办公室助理岗位职责
2013/12/25 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
诚信贷款承诺书
2014/05/30 职场文书
单位单身证明样本
2014/10/11 职场文书
华山导游词
2015/02/03 职场文书
户外活动总结
2015/02/04 职场文书
部门2015年度工作总结
2015/04/29 职场文书
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫