jQuery實現購物車添加商品並結算

這次帶給大家jQuery實現購物車添加商品並結算，jQuery實現購物車添加商品並結算的注意事項有哪些，下面就是實戰案例，一起來看一下。

nbsp;html>

  
    <metacharset>
    <title></title>
    <scripttype>
    <script>
    /*删除*/
      $(function(){
  $(".blue").bind("click",function(){
    $(this).parent().parent().remove();
    totalPrice();
  });
 
  /*当鼠标离开文本框时，获取当前值，调用totalPrice()函数进行结算*/
  $(".shopping_product_list_5 input").bind("blur",function(){
    var t = $(this).val();
    totalPrice();
  });
  var allPrice = 0;
  var allReduce = 0;
  var allCount = 0;
 
  $("#myTableProduct tr").each(function(){  /*循环购物车列表的每一行*/
    var num = parseInt($(this).find(".shopping_product_list_5 input").val());  /*获取文本框中数量值*/
    var price = parseFloat($(this).find(".shopping_product_list_4 label").text()); /* 获取商品价格*/
    var total = price * num;
    allPrice += total; /*计算所有商品的总价格*/
 
    /*获取节省的金额*/
    var reduce = parseFloat($(this).find(".shopping_product_list_3 label").text()) - parseFloat($(this).find(".shopping_product_list_4 label").text());
    var reducePrice = reduce*num;
    allReduce +=reducePrice;
 
    /*获取积分*/
    var count = parseFloat($(this).find(".shopping_product_list_2 label").text());
    allCount +=count;
  });
  $("#product_total").text(allPrice.toFixed(2)); /*填写计算结果，其中利用toFixed()函数保留两位小数*/
  $("#product_save").text(allReduce.toFixed(2));
  $("#product_integral").text(allCount.toFixed(2));
});
 function totalPrice(){
  var allPrice = 0;
  var allReduce = 0;
  var allCount = 0;
  $("#myTableProduct tr").each(function(){
    var num = parseInt($(this).find(".shopping_product_list_5 input").val());
    var price = parseFloat($(this).find(".shopping_product_list_4 label").text());
    var total = price * num;
    allPrice += total;
 
    var reduce = parseFloat($(this).find(".shopping_product_list_3 label").text()) - parseFloat($(this).find(".shopping_product_list_4 label").text());
    var reducePrice = reduce*num;
    allReduce +=reducePrice;
 
    var count = parseFloat($(this).find(".shopping_product_list_2 label").text());
    allCount +=count;
  });
  $("#product_total").text(allPrice.toFixed(2));
  $("#product_save").text(allReduce.toFixed(2));
  $("#product_integral").text(allCount.toFixed(2));
 }
    </script>
  
  
    <pclass>您已选购以下商品
  <pclass>
    <tablewidth>
      <trclass>
        <tdclass>商品名
        <tdclass>单品积分
        <tdclass>市场价
        <tdclass>当当价
        <tdclass>数量
        <tdclass>删除
      
    
    <tablewidth>
 
      <trclass>
        <tdclass><ahref>私募（首部披露资本博弈秘密的金融...
        <tdclass><label>189</label>
        <tdclass>￥<label>32.00</label>
        <tdclass>￥<label>18.90 </label>(59折)
        <tdclass><inputtype></inputtype>
        <tdclass><ahref>删除
      
      <trclass>
        <tdclass><ahref> 小团圆（张爱玲最神秘小说遗稿）
        <tdclass><label>173</label>
        <tdclass>￥<label>28.00</label>
        <tdclass>￥<label>17.30</label>(62折)
        <tdclass><inputtype></inputtype>
        <tdclass><ahref>删除
      
      <trclass>
        <tdclass><ahref>不抱怨的世界(畅销全球80国的世界...
        <tdclass><label>154</label>
        <tdclass>￥<label>24.80</label>
        <tdclass>￥<label>15.40</label> (62折)
        <tdclass><inputtype></inputtype>
        <tdclass><ahref>删除
      
      <trclass>
        <tdclass><ahref>福玛特双桶洗衣机XPB20-07S
        <tdclass><label>358</label>
        <tdclass>￥<label>458.00</label>
        <tdclass>￥<label>358.00</label> (78折)
        <tdclass><inputtype></inputtype>
        <tdclass><ahref>删除
      
      <trclass>
        <tdclass><ahref>PHP和MySQL Web开发 （原书第4版）
        <tdclass><label>712</label>
        <tdclass>￥<label>95.00</label>
        <tdclass>￥<label>71.20</label> (75折)
        <tdclass><inputtype></inputtype>
        <tdclass><ahref>删除
      
      <trclass>
        <tdclass><ahref>法布尔昆虫记（再买￥68.30即可参加“满199元减10元现金”活动）
        <tdclass><label>10</label>
        <tdclass>￥<label>198.00</label>
        <tdclass>￥<label>130.70</label> (66折)
        <tdclass><inputtype></inputtype>
        <tdclass><ahref>删除
      
    
    <pclass>
      <p><aid>清空购物车</aid></p>
      <ul>
        <liclass><inputname></inputname>
        <liclass>￥<labelid>
        <liclass>商品金额总计：
        <liclass>您共节省金额：￥<labelclass><br>
          可获商品积分：<labelclass>
        
      </labelclass></labelclass></liclass></liclass></labelid></liclass></liclass>
</ul>
    
  
  
</pclass></ahref></tdclass></tdclass></tdclass></tdclass></tdclass></ahref></tdclass></trclass></ahref></tdclass></tdclass></tdclass></tdclass></tdclass></ahref></tdclass></trclass></ahref></tdclass></tdclass></tdclass></tdclass></tdclass></ahref></tdclass></trclass></ahref></tdclass></tdclass></tdclass></tdclass></tdclass></ahref></tdclass></trclass></ahref></tdclass></tdclass></tdclass></tdclass></tdclass></ahref></tdclass></trclass></ahref></tdclass></tdclass></tdclass></tdclass></tdclass></ahref></tdclass></trclass></tablewidth></tdclass></tdclass></tdclass></tdclass></tdclass></tdclass></trclass></tablewidth></pclass></pclass></scripttype></metacharset>

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jquery外掛程式擴充功能使用詳解

#jQuery判斷瀏覽器版本的方法

jQuery表格頂欄固定效果

以上是jQuery實現購物車添加商品並結算的詳細內容。更多資訊請關注PHP中文網其他相關文章！