纯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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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.ini 中文版
2006/10/28 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
吐槽一下我所了解的Node.js
2014/10/08 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
Python实现统计单词出现的个数
2015/05/28 Python
python实现彩票系统
2020/06/28 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
微信公众号token验证失败解决方案
2019/07/22 Python
django 微信网页授权登陆的实现
2019/07/30 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
一套C#面试题
2013/10/09 面试题
文明城市创建标语
2014/06/16 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
世界红十字日活动总结
2015/02/10 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
解决redis批量删除key值的问题
2022/03/23 Redis