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

这次给大家带来jQuery实现购物车添加商品并结算,jQuery实现购物车添加商品并结算的注意事项有哪些,下面就是实战案例,一起来看一下。

                      /*删除*/      $(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)); }            您已选购以下商品

商品名 单品积分 市场价 当当价 数量 删除 私募(首部披露资本博弈秘密的金融... (59折) 删除 小团圆(张爱玲最神秘小说遗稿) (62折) 删除 不抱怨的世界(畅销全球80国的世界... (62折) 删除 福玛特双桶洗衣机XPB20-07S (78折) 删除 PHP和MySQL Web开发 (原书第4版) (75折) 删除 法布尔昆虫记(再买¥68.30即可参加“满199元减10元现金”活动) (66折) 删除

清空购物车

    ¥ 商品金额总计: 您共节省金额:¥
    可获商品积分:

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

jquery插件扩展使用详解

jQuery判断浏览器版本的方法

jQuery表格顶栏固定效果

以上就是jQuery实现购物车添加商品并结算的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2770389.html

(0)
上一篇 2025年3月8日 12:34:38
下一篇 2025年3月8日 12:34:47

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • jquery实现非动态搜索

    这次给大家带来jquery实现非动态搜索,jquery实现非动态搜索的注意事项有哪些,下面就是实战案例,一起来看一下。 nbsp;html>   jquery实现静态搜索功能          .navbar-collapse { p…

    编程技术 2025年3月8日
    200
  • jQuery插件FusionCharts绘制饼状图

    这次给大家带来jQuery插件FusionCharts绘制饼状图,jQuery插件FusionCharts绘制饼状图的注意事项有哪些,下面就是实战案例,一起来看一下。 1、了解帕累托图的特性以及和其他图的共性 2、设计帕累托图页面中引入图的…

    2025年3月8日
    200
  • jQuery操作背景颜色渐变动画效果

    这次给大家带来jQuery操作背景颜色渐变动画效果,jQuery操作背景颜色渐变动画效果的注意事项有哪些,下面就是实战案例,一起来看一下。 背景颜色渐变 function tggg() { //$(“#asd”).css({ “backgr…

    编程技术 2025年3月8日
    200
  • jquery实现全选反选单选

    这次给大家带来jquery实现全选反选单选,jquery实现全选反选单选的注意事项有哪些,下面就是实战案例,一起来看一下。          角色名称  角色说明  所属系统         系统管理员  管理员角色  武进公安平台    …

    2025年3月8日
    200
  • jQuery三种$()使用详解

    这次给大家带来jQuery三种$()使用详解,jQuery三种$()使用的注意事项有哪些,下面就是实战案例,一起来看一下。 $号是jQuery“类”的一个别称,$()构造了一个jQuery对象。所以,“$()”可以叫做jQuery的构造函数…

    编程技术 2025年3月8日
    200
  • 怎么选择使用jQuery版本

    这次给大家带来怎么选择使用jQuery版本,选择使用jQuery版本的注意事项有哪些,下面就是实战案例,一起来看一下。 这篇文章主要给大家介绍了关于如何选择jQuery版本,是1.x? 2.x?还是3.x? 在选择使用jquery之前我们常…

    2025年3月8日 编程技术
    200
  • jQuery的复合选择器使用详解

    这次给大家带来jQuery的复合选择器使用详解,jQuery的复合选择器使用的注意事项有哪些,下面就是实战案例,一起来看一下。 一 介绍 复合选择器将多个选择器(可以是ID选择器、元素选择或是类名选择器)组合在一起,两个选择器之间以逗号“,…

    2025年3月8日
    200
  • jquery内容过滤器使用方法

    这次给大家带来jquery内容过滤器使用方法,jquery内容过滤器使用的注意事项有哪些,下面就是实战案例,一起来看一下。 一 介绍 内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。内容过滤器共包括:contain…

    2025年3月8日
    200
  • jQuery的可见性过滤器使用

    这次给大家带来jQuery的可见性过滤器使用,jQuery可见性过滤器使用的注意事项有哪些,下面就是实战案例,一起来看一下。 一 介绍 元素的可见状态有两种,分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。因此,可见…

    2025年3月8日
    200
  • vue2实现购物车与地址自动绑定

    这次给大家带来vue2实现购物车与地址自动绑定,vue2实现购物车与地址自动绑定的注意事项有哪些,下面就是实战案例,一起来看一下。 首先,vue基础js写法 new Vue({ el:”#app”, //模型 data:{ }, filte…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论