jQuery实现购物车价格计算功能的方法

本文阐述了jQuery实现购物车价格计算功能的方法。分享给大家参考。具体如下：

目的

要修改html界面中的购物车数量，需要修改购物车的小计和总价。

实现理念

1.当你点击进入界面刷新时，在body中触发onload=' '方法，跳转到JS代码。这样做的原因是，我们只会在数据库中存储一个客户要购买的商品数量，而不会存储购物车中每种商品的小计价格和所有商品的总价。初始化的目的是计算这些数字并显示在前台界面上。

2.当数量输入框中每个商品的数量发生变化时，整个购物清单中商品的价格、小计和合计都会根据数量发生变化。

成品样品展示

完整代码(火狐浏览器)

！DOCTYPE HTMl HTMl标题购物车/标题meta http-equiv=' Content-Type ' Content=' text/HTMl；charset=utf-8'/！-要把jquery-1.9.1.min.js导进去，不导出不来-脚本类型=' text/JAVAScript ' src=' http : jquery-1。9 .1 .量滴js /脚本脚本语言=' JavaScript ' $(function(){ var size=3.0 * $(' # image1 ').宽度();$('#image1 ').将鼠标移到(函数(事件)){ var $ target=$(事件。目标)；if($ target。is(' img '){ $(' img id=' tip ' src=' ' $ target。attr(' src ')).css({'height':size，' width':size，}).appendTo($(' # imgtest '))；/*将当前所有匹配元素追加到指定元素内部的末尾位置。*/}}).mouseout(函数(){$('#tip ').移除();/*移除元素*/})})/脚本脚本类型='text/javascript '函数总计(id){/*计算单个的价格*/var数量=文件。getelementbyid(' quantity ' id).价值；var price=文档。getelementbyid(' price ' id).价值；var smallTotal=数量*价格；var小t=文档。getelementbyid(' small total ' id)；小t . innerhtml=小总数；/*计算总价格*/var TotalPrice=0；for(var a=1；a3；a){ var quantity=文档。getelementbyid('数量' a).价值；var price=文档。getelementbyid(' price ' a).价值；var smallTotal=数量*价格；总价=总价小总价；} var total=文档。getelementbyid(' total ')；total . innerhtml=total price }/script脚本类型=' text/JavaScript '函数initialize(){ var total price=0；for(var a=1；a3；a){ var quantity=文档。getelementbyid('数量' a).价值；var price=文档。getelementbyid(' price ' a).价值；var smallTotal=数量*价格；总价=总价小总价；/* alert(小TotaL)；*/var小t=文档。getelementbyid('小总计' a)；小t . innerhtml=小总数；}/*取出购物车的所有商品的价格总和*/var total=文档。getelementbyid(' total ')；total . innerhtml=total price }/脚本样式类型=' text/CSS ' # imgtest { position : absolute；top : 100 pxleft : 400 pxz-index : 1；}表格{ left : 100pxfont-size : 20px；}/style/head body on load=' initialize()' div id=' imgtest '/div br/br/表格边框=' 1 '样式=' text-align : centeralign=' center ' d style=' height : 50 ' TD style=' width : 300 px '商品名称/TD TD TD style='宽度： 60px '图片/TD TD TD style='宽度： 170 px '数量/TD TD TD style='宽度： 170 px '价格/TD TD TD style='宽度： 250 px '小计/td /thead tbody tr td class='name '商品1/TD TD TD class=' image ' img src=' http :1。jpg ' width=' 40px ' height=' 40px ' id=' image 1 '/TD TD class=' quantity ' input id=' quantity 1 ' value=' 1 ' on bulr=' total(1)；//td td class='price '输入类型='隐藏' id='price1 '值=' 20 '/20/TD TD class=' total ' span id=' small total 1 '/span元/TD/tr/tr TD类='名称'商品2/TD TD TD class=' image ' img src=' http :1。jpg ' width=' 40px ' height=' 40px ' id=' image 1 '/TD TD class=' quantity ' input id=' quantity 2 ' value=' 2 ' on bulr=' total(2)；//td td class='price '输入类型='隐藏' id='price2 '值=' 30 '/30/TD TD class=' total ' span id=' small total 2 '/span元/TD/tr/tr TD colspan=' 4 ' class=' cart _ total ' br/TD TD TD span class=' red '总计：/spanspan id='total'/span元/td /tr /tbody /table /body/html希望本文所述对大家的jQuery程序设计有所帮助。