jquery模仿淘宝购物车的结算功能实例

jquery模仿淘宝购物车的结算功能实例

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

效果图展示:

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模仿淘宝购物车的结算功能实例

查看演示 源码下载