纯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 相关文章推荐
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
js分页工具实例
Jan 28 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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 email邮箱正则
2008/10/08 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
动态加载iframe
2006/06/16 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
浅谈js中的bind
2019/03/18 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
jQuery冲突问题解决方法
2021/01/19 jQuery
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python利用微信公众号实现报警功能
2018/06/10 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python查看数据类型的方法
2019/10/12 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
创业计划书中要认真思考的问题
2013/12/28 职场文书
上课看小说检讨书
2014/02/22 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
大家访活动实施方案
2014/03/10 职场文书
班子四风对照检查材料
2014/08/21 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
护士节慰问信
2015/02/15 职场文书
财务管理制度范本
2015/08/04 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Golang 入门 之url 包
2022/05/04 Golang
SQL Server中的游标介绍
2022/05/20 SQL Server