jQuery实现购物车添加商品并结算
jquery
商品
购物车
这次给大家带来jQuery实现购物车添加商品并结算，jQuery实现购物车添加商品并结算的注意事项有哪些，下面就是实战案例，一起来看一下。
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>
<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>
</head>
<body>
<pclass="shopping_list_top">您已选购以下商品</p>
<pclass="shopping_list_border">
<tablewidth="100%"border="1px solid #ccc">
<trclass="shopping_list_title">
<tdclass="shopping_list_title_1">商品名</td>
<tdclass="shopping_list_title_2">单品积分</td>
<tdclass="shopping_list_title_3">市场价</td>
<tdclass="shopping_list_title_4">当当价</td>
<tdclass="shopping_list_title_5">数量</td>
<tdclass="shopping_list_title_6">删除</td>
</tr>
</table>
<tablewidth="100%"border="1px solid #ccc"id="myTableProduct">
<trclass="shopping_product_list"id="shoppingProduct_01">
<tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">私募（首部披露资本博弈秘密的金融...</a></td>
<tdclass="shopping_product_list_2"><label>189</label></td>
<tdclass="shopping_product_list_3">￥<label>32.00</label></td>
<tdclass="shopping_product_list_4">￥<label>18.90 </label>(59折)</td>
<tdclass="shopping_product_list_5"><inputtype="text"value="1"/></td>
<tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
</tr>
<trclass="shopping_product_list"id="shoppingProduct_02">
<tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue"> 小团圆（张爱玲最神秘小说遗稿）</a></td>
<tdclass="shopping_product_list_2"><label>173</label></td>
<tdclass="shopping_product_list_3">￥<label>28.00</label></td>
<tdclass="shopping_product_list_4">￥<label>17.30</label>(62折)</td>
<tdclass="shopping_product_list_5"><inputtype="text"value="1"/></td>
<tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
</tr>
<trclass="shopping_product_list"id="shoppingProduct_03">
<tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">不抱怨的世界(畅销全球80国的世界...</a></td>
<tdclass="shopping_product_list_2"><label>154</label></td>
<tdclass="shopping_product_list_3">￥<label>24.80</label></td>
<tdclass="shopping_product_list_4">￥<label>15.40</label> (62折)</td>
<tdclass="shopping_product_list_5"><inputtype="text"value="2"/></td>
<tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
</tr>
<trclass="shopping_product_list"id="shoppingProduct_04">
<tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">福玛特双桶洗衣机XPB20-07S</a></td>
<tdclass="shopping_product_list_2"><label>358</label></td>
<tdclass="shopping_product_list_3">￥<label>458.00</label></td>
<tdclass="shopping_product_list_4">￥<label>358.00</label> (78折)</td>
<tdclass="shopping_product_list_5"><inputtype="text"value="1"/></td>
<tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
</tr>
<trclass="shopping_product_list"id="shoppingProduct_05">
<tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">PHP和MySQL Web开发 （原书第4版）</a></td>
<tdclass="shopping_product_list_2"><label>712</label></td>
<tdclass="shopping_product_list_3">￥<label>95.00</label></td>
<tdclass="shopping_product_list_4">￥<label>71.20</label> (75折)</td>
<tdclass="shopping_product_list_5"><inputtype="text"value="1"/></td>
<tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
</tr>
<trclass="shopping_product_list"id="shoppingProduct_06">
<tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">法布尔昆虫记</a>（再买￥68.30即可参加“满199元减10元现金”活动）</td>
<tdclass="shopping_product_list_2"><label>10</label></td>
<tdclass="shopping_product_list_3">￥<label>198.00</label></td>
<tdclass="shopping_product_list_4">￥<label>130.70</label> (66折)</td>
<tdclass="shopping_product_list_5"><inputtype="text"value="1"/></td>
<tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
</tr>
</table>
<pclass="shopping_list_end">
<p><aid="removeAllProduct"href="javascript:void(0);"rel="external nofollow">清空购物车</a></p>
<ul>
<liclass="shopping_list_end_1"><inputname=""type="image"src="images/shopping_balance.gif"/></li>
<liclass="shopping_list_end_2">￥<labelid="product_total"></label></li>
<liclass="shopping_list_end_3">商品金额总计：</li>
<liclass="shopping_list_end_4">您共节省金额：￥<labelclass="shopping_list_end_yellow"id="product_save"></label><br/>
可获商品积分：<labelclass="shopping_list_end_yellow"id="product_integral"></label>
</li>
</ul>
</p>
</p>
</body>
</html>登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是jQuery实现购物车添加商品并结算的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
刺客信条阴影：贝壳谜语解决方案
3 周前
By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前
By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前
By DDD
节省R.E.P.O.解释（并保存文件）
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
4 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
jQuery引用方法详解：快速上手指南
Feb 27, 2024 pm 06:45 PM
jQuery引用方法详解：快速上手指南jQuery是一个流行的JavaScript库，被广泛用于网站开发中，它简化了JavaScript编程，并为开发者提供了丰富的功能和特性。本文将详细介绍jQuery的引用方法，并提供具体的代码示例，帮助读者快速上手。引入jQuery首先，我们需要在HTML文件中引入jQuery库。可以通过CDN链接的方式引入，也可以下载
jQuery中如何使用PUT请求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u
实战教程：PHP和MySQL实现购物车功能详解
Mar 15, 2024 pm 12:27 PM
实战教程：PHP和MySQL实现购物车功能详解购物车功能是网站开发中常见的功能之一，通过购物车用户可以方便地将想要购买的商品加入购物车，然后进行结算和支付。在这篇文章中，我们将详细介绍如何使用PHP和MySQL实现一个简单的购物车功能，并提供具体的代码示例。创建数据库和数据表首先需要在MySQL数据库中创建一个用来存储商品信息的数据表。以下是一个简单的数据表
jQuery如何移除元素的height属性？
Feb 28, 2024 am 08:39 AM
jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度
jQuery小技巧：快速修改页面所有a标签的文本
Feb 28, 2024 pm 09:06 PM
标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：<
得物商品怎么鉴别真假 鉴别真假方法
Mar 12, 2024 pm 12:16 PM
我们在使用这款平台来进行一些多方面选择的时候，我们所购买到的一些商品，尤其是我们所购买的鞋子，自己花钱买来，不确定是不是假货，所以为了能够让我们自己安心一些，就只有进行一些商品方面的一些鉴定，这样才能可以知道是否是真的假的，这让自己买起来也比较放心一些，也是说花钱也能够更踏实一点，至少不用穿假货对不对，所以今日为了能够让更多的用户们可以知道怎么去进行商品的一些鉴别，今日小编就来给大家伙们好好的讲解一下上面的一些内容资讯，所以有想法的朋友们一定不能够错过了，赶紧和小编一起来看看吧。 鉴别真假
使用jQuery修改所有a标签的文本内容
Feb 28, 2024 pm 05:42 PM
标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：
美团电商商品怎么加入购物车_美团电商商品加入购物车具体步骤
Mar 27, 2024 pm 09:50 PM
1、首先打开【美团】APP软件，在【电商】页面内，点击一个喜欢的【商品】选项进入【商品详情】页面。2、然后在【商品详情】页面，点击底部功能栏【加入购物车】按钮。3、接着在选项列表内，点击喜欢的【规格】选项，点击【确认】按钮即可成功加入购物车。
