收藏本站 收藏本站
积木网首页 - 技术学院 - 软件测试 - 网站黄页 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

纯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 Easyui快速开发总结
最近工作很轻松,整理了些关于easyui的datagrid的开发文档,整理的比较细致,直接复制粘贴就可以使用了。代码内容如下:linkhref="../../Content/easyUI/themes/d

jquery带翻页动画的电子杂志代码分享
这是一款基于jquery实现的带翻页动画的电子杂志,小编有时就在想我们读的纸质课本可不可以都改成电子书,这要是不是会更节省资源呐?记得以前我

jQuery实现大转盘抽奖活动仿QQ音乐代码分享
jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效源码是一款基于jQuery,点击大转盘开始抽奖可抽到绿钻的仿qq音乐抽奖转盘的代码。运行效果图:----------------

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号