夏日博客

A-A+

jquery实现模仿淘宝购物车结算两个例子

2016年01月12日 前端设计 暂无评论 阅读 7 views 次

购物车在最初的用法就是一个页面了而到了现在的淘宝网它的购物车非常的人性化并且好用了，下面我们来看jquery实现模仿淘宝购物车结算两个例子，希望对各位有帮助。

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

说下大致的思路吧:

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

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

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

  1. <script type="text/javascript">  
  2.   $(function(){  
  3.     //计算总金额  
  4.     function totalMoney(){  
  5.       var total_price = 0;  
  6.       var total_count = 0;  
  7.       $(".d1-input").each(function(){  
  8.         if($(this).hasClass('status')) {  
  9.           var obj1 = $(this).parent().siblings(".d4").find(".count").val();//获取一行的商品数量  
  10.           total_count += parseInt(obj1);  
  11.           var obj2= $(this).parent().siblings(".d5").find(".cart-price").text();//获取一行的金额  
  12.           total_price += parseInt(obj2);  
  13.         }  
  14.       });  
  15.       $(".item").text(total_count);//将计算出的总金额显示  
  16.       $(".total").text(total_price);//将计算出的总数量显示  
  17.     }  
  18.     //全选  
  19.     $(".d-input").toggle( function(){  
  20.       $(this).addClass("status");  
  21.       $(".sc-mid-list .d1-input").addClass("status");//添加勾选样式  
  22.       $(".sc-mid-list").addClass("mouseover");  
  23.       totalMoney();  
  24.       },  
  25.       function(){  
  26.       $(this).removeClass("status");  
  27.       $(".sc-mid-list .d1-input").removeClass("status");//取消勾选样式  
  28.       $(".sc-mid-list").removeClass("mouseover");  
  29.       totalMoney();  
  30.     });  
  31.     // 单选  
  32.     $(".d1-input").toggle( function(){  
  33.       $(this).addClass("status");//添加勾选样式  
  34.       $(this).parents(".sc-mid-list").addClass("mouseover");  
  35.       totalMoney();  
  36.       },  
  37.       function(){  
  38.       $(this).removeClass("status");//取消勾选样式  
  39.       $(this).parents(".sc-mid-list").removeClass("mouseover");  
  40.       totalMoney();  
  41.     });  
  42.     // 减号样式  
  43.     function count(){  
  44.       $(".count").each(function(){  
  45.         var num = $(this).val();  
  46.         if (num == 1) {  
  47.           $(this).siblings(".reduce").removeClass("two").addClass("one");  
  48.           $(this).siblings(".reduce").attr("disabled","disabled");  
  49.         } else {  
  50.           $(this).siblings(".reduce").removeClass("one").addClass("two");  
  51.         }  
  52.       })//根据数量是否为1，改变减号的样式  
  53.     }  
  54.     // 加  
  55.     $(".sc-mid-list .add").click(function(){  
  56.       var input = $(this).siblings(".count");  
  57.       var obj = $(this).parents(".d4");  
  58.       var per = parseFloat(obj.siblings(".d3").find(".per").text());//获取当前一行的单价  
  59.       var num = '';  
  60.       var price = '';  
  61.       input.attr("value", parseInt(input.attr("value")) + 1 );//数量加1  
  62.       num = input.attr("value");  
  63.       price = num*per;//  
  64.       obj.siblings(".d5").find(".cart-price").text(price);  
  65.       count();  
  66.       totalMoney();  
  67.     })  
  68.     // 减  
  69.     $(".sc-mid-list .reduce").click(function(){  
  70.       var input = $(this).siblings(".count");  
  71.       var obj = $(this).parents(".d4");  
  72.       var per = parseFloat(obj.siblings(".d3").find(".per").text());//获取当前一行的单价  
  73.       var num = '';  
  74.       var price = '';  
  75.       var Val = parseInt(input.attr("value"));  
  76.       if(Val <= 1){  
  77.         Val = 2;  
  78.         }  
  79.       input.attr("value", parseInt(Val) - 1 );//数量减1  
  80.       num = input.attr("value");  
  81.       price = num*per;//  
  82.       obj.siblings(".d5").find(".cart-price").text(price);  
  83.       count();  
  84.     })  
  85.   })  
  86. </script>  
标签：

给我留言