jquery来实现的添加商品和减少商品数量,用于购物车等实时改变价格

代码没有操作数据库的部分，也没有发送和接收数据的部分

演示

XML/HTML Code

1. <p class="num_box"><a class="J_jia">+</a><label><input type="text" class="num" value="50"/></label><a class="J_jian">-</a></p>
2. <script type="text/javascript">
3. $(document).ready(function(){
4. var add,reduce,num,num_txt;
5. add=$(".J_jia");//添加数量
6. reduce=$(".J_jian");//减少数量
7. num="";//数量初始值
8. num_txt=$(".num");//接受数量的文本框
9. //var num_val=num_txt.val();//给文本框附上初始值
11. /*添加数量的方法*/
12. add.click(function(){
13. num = $(".num").val();
14. num++;
15. num_txt.val(num);
16. //ajax代码可以放这里传递到数据库实时改变总价
17. });
19. /*减少数量的方法*/
20. reduce.click(function(){
21. //如果文本框的值大于0才执行减去方法
22. num = $(".num").val();
23. if(num >0){
24. //并且当文本框的值为1的时候，减去后文本框直接清空值，不显示0
25. if(num==1)
26. { num--;
27. num_txt.val("");
28. }
29. //否则就执行减减方法
30. else
31. {
32. num--;
33. num_txt.val(num);
34. }
36. }
37. });
38. })
39. </script>

CSS Code

1. .num_box{width:100%;float:left;}
2. .num_box a{width:20px;text-align:center;cursor:pointer;}
3. .num_box a:hover{background:#f0f0f0;}
4. .num_box a:active{background:#E3E3E3;}
5. .num,.num_box a{height:20px;line-height:20px;border-color:#ccc;border-style:solid;color:#333;float:left;}
6. .num{border-width:1px;text-align:left;text-indent:5px;line-height:15px\9;padding:0;margin:0;width:100px;}
7. .J_jia{border-width:1px 0 1px 1px;border-radius:3px 0 0 3px;}
8. .J_jian{border-width:1px 1px 1px 0;border-radius:0 3px 3px 0;}

原文地址:http://www.freejs.net/article_jquerywenzi_66.html