本文实例讲述了jQuery实现购物车计算价格功能的简易方法，做的比较简单，现分享给大家供大家参考。具体如下：
目的：
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 ????pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>jQuery实现的购物车功能</title> 8 <!-- 使用绝对路径引入 jQuery库文件 --> 9 <script type="text/javascript"10 ????src="${pageContext.request.contextPath }/js/jquery-1.11.2.js"></script>11 <script type="text/javascript">12 ????$(function() {13 ????????//根据类选择器，当点击 添加商品按钮的时候触发,为加号按钮注册click事件处理函数14 ????????$(".add").click(function() {15 ????????????var t = $(this).parent().find(‘input[class*=text_box]‘);16 ????????????//每点击添加 按钮1次，商品数量加117 ????????????t.val(parseInt(t.val()) + 1);18 ????????????//再调用计算商品总价方法19 ????????????setTotal();20 ????????});21 22 ????????//根据类选择器，当点击 减号 按钮的时候触发23 ????????$(".min").click(function() {24 ????????????var t = $(this).parent().find(‘input[class*=text_box]‘);25 ????????????//每点击减少按钮1次，商品数量减126 ????????????t.val(parseInt(t.val()) - 1);27 ????????????//当文本框的值为减少到小于等于1时候,取值128 ????????????if (parseInt(t.val()) < 0) {29 ????????????????t.val(0);30 ????????????}31 ????????????//再调用计算商品总价方法32 ????????????setTotal();33 ????????});34 35 ????????//计算总价格的函数36 ????????function setTotal() {37 ????????????var s = 0;38 ????????????//each 遍历39 ????????????$("#tab td").each(40 ????????????????????function() {41 ????????????????????//find()方法 遍历input标签中的后代, class名为 text_box中 文本框 中的值，即：商品的数量，乘以商品的价格42 ????????????????????????s += parseInt($(this).find(‘input[class*=text_box]‘).val())* 43 ????????????????????????????????parseFloat($(this).find(‘span[class*=price]‘).text());44 ????????????????????});45 ????????????//将计算的结果通过 jQuery的 html()方法赋予给 总价，并通过 toFixed()进行取舍46 ????????????$("#total").html(s.toFixed(2));47 ????????}48 ????????//再调用计算商品总价方法49 ????????setTotal();50 ????});51 </script>52 </head>53 <body>54 ????<table id="tab">55 ????????<tr>56 ????????????<td><span>商品单价:</span><span class="price">2.50（元）</span> <input57 ????????????????class="min" name="" type="button" value="-" /> <input58 ????????????????class="text_box" name="" type="text" value="1" /> <input59 ????????????????class="add" name="" type="button" value="+" /></td>60 ????????</tr>61 ????????<tr>62 ????????????<td><span>商品单价:</span><span class="price">7.50（元）</span> <input63 ????????????????class="min" name="" type="button" value="-" /> <input64 ????????????????class="text_box" name="" type="text" value="1" /> <input65 ????????????????class="add" name="" type="button" value="+" /></td>66 ????????</tr>67 ????</table>68 ????<p>69 ????????总价:<label id="total"></label>（元）70 ????</p>71 </body>72 </html>实现在jsp界面修改购物车商品的件数，点击按钮可以实现商品数量的减少或者增加，并且能够实时的计算出总的商品价格。
实现思路：
文件中的代码实现了简单的购物车根据数量，计算总价的功能，源码可以直接导入运行，下面详细介绍一下它的实现过程。
1、引入jQuery的库文件
<!-- 使用绝对路径引入 jQuery库文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.2.js"></script>
2、编写一个 table，搭建主体内容
3、编写jQuery代码
①、$(function(){})，当文档结构完全加载完毕再去执行函数中的代码；
②、$(".add").click(function(){})，为加号按钮注册click事件处理函数；
③、点击加号按钮的时候执行的代码
④、var t=$(this).parent().find(‘input[class*=text_box]‘)，获取文本框，这个文本中显示的是要购买商品的数目；
⑤、t.val(parseInt(t.val())+1)，点击一次商品数量加1；
⑥、setTotal()，执行此函数可以计算出总的价格并且显示；
⑦、$(".min").click(function(){})，为减号按钮注册click事件处理函数；
⑧、计算总价格的函数
⑨、var s=0，声明一个变量，此变量用来存储总价格。
⑩、$("#tab td").each(function(){
s+=parseInt($(this).find(‘input[class*=text_box]‘).val())*parseFloat($(this).find(‘span[class*=price]‘).text());
});
可以遍历文本框并乘以单价，然后进行累加，最后计算出来的总价格。
4、运行效果展示：
以上是一个jQuery实现购物车计算价格功能的方法，写的比较简单，可以作为jQuery初学者的入门学习素材，以强化jQuery基本语法的学习。
jQuery实现购物车计算价格功能的方法
原文地址：https://www.cnblogs.com/2018-fyj/p/8646257.html