點擊增加或者減少商品數量並且自動計算總價格:本章節介紹一下如何實現點擊按鈕來添加或者刪除商品的數量，並且能夠自動計算商品的總價格。代碼實例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" con
點擊增加或者減少商品數量並且自動計算總價格:
本章節介紹一下如何實現點擊按鈕來添加或者刪除商品的數量，並且能夠自動計算商品的總價格。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> span{ color:red; cursor:pointer; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#quantity").keyup(function(){ if(isNaN($(this).val())||parseInt($(this).val())<1){ $(this).val("1"); $("#totalPrice").html($("#price").val()); return; } var total=parseFloat($("#price").val())*parseInt($(this).val()); $("#totalPrice").html(total.toFixed(2)); }) $("#add").click(function(){ numAdd(); }); $("#del").click(function(){ numDec(); }); }) /*商品數量+1*/ function numAdd(){ var num_add = parseInt($("#quantity").val())+1; if($("#quantity").val()==""){ num_add = 1; } $("#quantity").val(num_add); var total = parseFloat($("#price").val())*parseInt($("#quantity").val()); $("#totalPrice").html(total.toFixed(2)); } /*商品數量-1*/ function numDec(){ var num_dec = parseInt($("#quantity").val())-1; if(num_dec<1){ //購買數量必須大於或等於1 alert("not lt 1"); } else{ $("#quantity").val(num_dec); var total = parseFloat($("#price").val())*parseInt($("#quantity").val()); $("#totalPrice").html(total.toFixed(2)); } } </script> </head> <body> <p> 數量:<span id="del">-</span> <input type="text" id="quantity" /> <span id="add">+</span> </p> <p class="sdsd"> 總價格:<span id="totalPrice">28.10</span> </p> <input type="hidden" value="28.1" id="price" /> </body> </html>
以上代碼中，點擊左右按鈕可以實現上篇的增減，並且能夠自動計算總價格，在文本框手動寫入數量的時候也能夠自動計算總價格，下麵介紹一下它的實現過程:
一.代碼註釋:
1.$(function(){})，當文檔結構完全載入完畢再去執行函數中的代碼。
2.$("#quantity").keyup(function(){})，為文本框註冊keyup事件處理函數。
3.if(isNaN($(this).val())||parseInt($(this).val())<1)，判斷文本框中的內容是否非數字或者小於1.
4.$(this).val("1")，將文本框的內容設置為1。
5.$("#totalPrice").html($("#price").val())，將顯示價格的span元素的內容設置為id屬性值為price提供的價格。
6.return，跳出函數的執行。
7.var total=parseFloat($("#price").val())*parseInt($(this).val())，計算商品的總價格。
8.$("#totalPrice").html(total.toFixed(2))，將總價格寫入span元素。
9.$("#add").click(function(){}),註冊事件處理函數，點擊可以添加商品數量。
10.$("#del").click(function(){})，註冊事件處理函數，點擊可以刪除商品數量。
11.function numAdd(){}，此函數可以添加商品數量並且能夠自動計算總價格。
12.var num_add = parseInt($("#quantity").val())+1，將文本框數字值加1.
13.if($("#quantity").val()==""){num_add = 1;}，如果文本框的內容為空，則將num_add值設置為1。
14.$("#quantity").val(num_add)，設置文本框的值。
15.var total = parseFloat($("#price").val())*parseInt($("#quantity").val())，計算總價格。
16.$("#totalPrice").html(total.toFixed(2))，對價格進行保留兩位小數處理，並寫入span。
二.相關閱讀:
1.isNaN()函數可以參閱JavaScript的isNaN()方法一章節。
2.parseInt()函數可以參閱javascript的parseInt()函數一章節。
3.html()函數可以參閱jQuery的html()方法一章節。
4.parseFloat()函數可以參閱javascript的parseFloat()方法一章節。
5.toFixed()函數可以參閱javascript的Number對象的toFixed()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13693
更多內容可以參閱:http://www.softwhy.com/jquery/
