首页>>Jquery文字>>jquery来实现的添加商品和减少商品数量,用于购物车等实时改变价格(2013-10-16)

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

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

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();//给文本框附上初始值  
  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>  

 

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:15px9;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