基于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>
时间： 2024-07-29 06:40:55