这次给大家带来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实现购物车添加商品并结算的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号