登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery实现购物车添加商品并结算

php中世界最好的语言
发布: 2018-04-19 16:20:16
原创
2765人浏览过

这次给大家带来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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号