jQuery实现购物车物品数量的加减

浏览数：40 / 时间：2015年06月09日

基于jquery的一款代码，实现购物车数据的加减，在淘宝网、京东商城购物时时经常见到的一个功能，点击文本框两侧的“+”与“-”，就可以增加或减少文本框内的数字值，每次步长为1，当然这个是可以自己设置的。本款效果除了加减功能外，还可以自动计算价格。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>jQuery实现购物车物品数量的加减</title>
 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 7 <script>
 8 $(function(){
 9     var t = $("#text_box");
10     $("#add").click(function(){        
11         t.val(parseInt(t.val())+1)
12         setTotal();
13     })
14     $("#min").click(function(){
15         t.val(parseInt(t.val())-1)
16         setTotal();
17     })
18     function setTotal(){
19         $("#total").html((parseInt(t.val())*3.95).toFixed(2));
20     }
21     setTotal();
22 })
23 </script>
24 </head>
25 <body>
26 <p>单价：3.95</p>
27 <input id="min" name="" type="button" value="-" />
28 <input id="text_box" name="" type="text" value="4" />
29 <input id="add" name="" type="button" value="+" />
30 <p>总价：<label id="total"></label></p>
31 </body>
32 </html>