夏日博客

A-A+

jquery简单购物车结算功能例子

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

现在的网站购物车用到了php与jquery 动态与脚本相互结合进行操作了，这个用户体验会好许多了，下面我们一起来看一个例子。

今天在做购物车的页面，遇到结算的功能.

暂时先做了点击加减数量的时候,金额变化的功能,废话不多说,贴上代码:

  1. <div class="sc-mid-box">  
  2.     <div class="sc-mid-list fl">  
  3.         <div class="d1 fl">  
  4.             <div class="d1-input fl"></div>  
  5.             <img src="images/collection_auction-01.png">  
  6.         </div>  
  7.         <div class="d2 fl">收藏级冰种水润贵妃手镯</div>  
  8.         <div class="d3 fl">  
  9.             <p class="p1"><span>1.8001</span>万</p>  
  10.             <p class="p2"><span class="per">1.6001</span>万</p>  
  11.         </div>  
  12.         <div class="d4 fl">  
  13.             <div class="d4-div">  
  14.                 <div class="reduce fl">-</div>  
  15.                 <input type="text" class="count fl" value="1" >  
  16.                 <div class="add  fl">+</div>  
  17.             </div>  
  18.         </div>  
  19.         <div class="d5 fl">  
  20.             <span class="cart-price">1.6001</span>万  
  21.         </div>  
  22.         <div class="d6 fl">删除</div>  
  23.     </div>  
  24. </div>  

在实现功能之前，听着大神讲解思路。可是越听越晕。无奈，只能一步两步……一步两步……慢慢写，边走边捋清思路。

后来冷静下来，有点想明白了,大概实现的思路是，获取单价转化成浮点数，获取数量转化成整数，再把两者相乘。最后把结果赋给金额即可。

  1. //加  
  2. $(".add").click(function(){  
  3.     var input = $(this).siblings(".count");  
  4.     var obj = $(this).parents(".d4");  
  5.     var per = parseFloat(obj.siblings(".d3").find(".per").text());//获取单价转化成浮点数  
  6.     var num = '';  
  7.     var price = '';  
  8.     input.attr("value", parseInt(input.attr("value")) + 1 );//获取input的值，转化成整数再+1  
  9.     num = input.attr("value");  
  10.     price = num*per;//计算金额  
  11.     obj.siblings(".d5").find(".cart-price").text(price);//将结果赋给金额  
  12.       
  13. })  

这是在加数量的时候显示金额，减数量其实同理。在这里就不列出来了,其实结算的功能不止这些，比如很多种商品的总金额。由于时间的原因，暂时就写这么多,后续的功能，会在后面的博客里提到，尽请期待。

标签：

给我留言