前端开发博客

这里会共享一些前端方面的咨询、技术以及自己写的一些代码,主要是记录自己的学习过程的一个博客。

当前位置:首页 > jquery

基于jquery来实现的添加商品和减少商品数量

时间:2012-08-21 10:50:59  来源:  作者:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
 .num_box{width:100%;float:left;}
 .num_box a{width:20px;text-align:center;cursor:pointer;}
 .num_box a:hover{background:#f0f0f0;}
 .num_box a:active{background:#E3E3E3;}
 .num,.num_box a{height:20px;line-height:20px;border-color:#ccc;border-style:solid;color:#333;float:left;}
 .num{border-width:1px;text-align:left;text-indent:5px;line-height:15px\9;padding:0;margin:0;width:100px;}
 .J_jia{border-width:1px 0 1px 1px;border-radius:3px 0 0 3px;}
 .J_jian{border-width:1px 1px 1px 0;border-radius:0 3px 3px 0;}
</style>
</head>
<body>
    <p class="num_box"><a class="J_jia">+</a><label><input type="text" class="num" /></label><a class="J_jian">-</a></p>
    <script type="text/javascript">
     $(document).ready(function(){
   var add,reduce,num,num_txt;
   add=$(".J_jia");//添加数量
   reduce=$(".J_jian");//减少数量
   num="";//数量初始值
   num_txt=$(".num");//接受数量的文本框   
   //var num_val=num_txt.val();//给文本框附上初始值
   
   /*添加数量的方法*/
   add.click(function(){
     num = $(".num").val();    
     num++;
     num_txt.val(num);
    });
    
   /*减少数量的方法*/ 
   reduce.click(function(){
    //如果文本框的值大于0才执行减去方法
        num = $(".num").val();
     if(num >0){
      //并且当文本框的值为1的时候,减去后文本框直接清空值,不显示0
      if(num==1)
      { num--;
       num_txt.val("");
      }
      //否则就执行减减方法
      else
      {
       num--;
       num_txt.val(num);
      }
 
     }
    });
  })
    </script>
</body>
</html>