标签：
点击增加或者减少商品数量并且自动计算总价格:
本章节介绍一下如何实现点击按钮来添加或者删除商品的数量，并且能够自动计算商品的总价格。
代码实例如下:
<!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/
标签：
原文地址：http://www.cnblogs.com/softwhy/p/5170411.html
