JQuery实现点击加减按钮数字递增递减 并可直接输入数字提交
在很多销售类型的网站中，经常需要客户填写需要购买的数量，其实还可以让客户通过点击加号实现购买数量增加，点击减号实现数量减少的功能，这个可以用jquery轻松实现，详细代码如下：
样式：
代码：
<!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)
- 最新评论