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

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

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

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();//给文本框附上初始值  
10.      
11.    /*添加数量的方法*/  
12.    add.click(function(){  
13.      num = $(".num").val();      
14.      num++;  
15.      num_txt.val(num);  
16.      //ajax代码可以放这里传递到数据库实时改变总价  
17.     });  
18.       
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.       }  
35.     
36.      }  
37.     });  
38.   })  
39.     </script>  

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;}