快捷搜索:   服务器  PHP  安全  IIS  linux 安全

JQuery实现点击加减按钮数字递增递减 并可直接输入数字提交

在很多销售类型的网站中,经常需要客户填写需要购买的数量,其实还可以让客户通过点击加号实现购买数量增加,点击减号实现数量减少的功能,这个可以用jquery轻松实现,详细代码如下:

样式:

image.png

代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html,body,div,ul,li{
margin: 0;
padding: 0;
}
a{text-decoration: none;}
.addcount{
width: 200px;
margin:50px auto;
}
.addcount a{
width: 20px;
height: 24px;
line-height: 24px;
text-align: center;
background: #ffa800;
color: #fff;
display: inline-block;
}
.addcount input{
    width: 50px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
}
</style>
</head>
<body>
<div class="addcount">
    <a class="J_minus" href="javascript:;">-</a>
    <input type="text" class="J_input" value="1">
    <a class="J_add" href="javascript:;">+</a>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('.addcount').each(function(){
   var _this=$(this);
   var add=$(_this).find(".J_add");//添加数量  
   var reduce=$(_this).find(".J_minus");//减少数量  
  var num=1;//数量初始值  
   var num_txt=$(_this).find(".J_input");//接受数量的文本框 
   $(add).click(function(){  
     num = $(num_txt).val();      
     num++;  
     num_txt.val(num);  
     //ajax代码可以放这里传递到数据库实时改变总价  
    });
    /*减少数量的方法*/   
   $(reduce).click(function(){  
    //如果文本框的值大于0才执行减去方法  
        num =  $(num_txt).val();  
     if(num >0){  
      //并且当文本框的值为1的时候,减去后文本框直接清空值,不显示0  
      if(num==1)  
      { num--;  
       num_txt.val("1");  
      }  
      //否则就执行减减方法  
      else  
      {  
       num--;  
       num_txt.val(num);  
      }  
    
     }  
    });        
    })  
});
</script>
</body>
</html>



顶(0)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论