jQuery實現購物車計算價格功能的方法
本文實例講述了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次，商品數量加1 17 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次，商品數量減1 26 t.val(parseInt(t.val()) - 1); 27 //當文本框的值為減少到小於等於1時候,取值1 28 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> <input 57 class="min" name="" type="button" value="-" /> <input 58 class="text_box" name="" type="text" value="1" /> <input 59 class="add" name="" type="button" value="+" /></td> 60 </tr> 61 <tr> 62 <td><span>商品單價:</span><span class="price">7.50（元）</span> <input 63 class="min" name="" type="button" value="-" /> <input 64 class="text_box" name="" type="text" value="1" /> <input 65 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實現購物車計算價格功能的方法