JQuery实现点击选加减按钮数字递增或递减也能直接输入数字提交的方法
时间：7年前 阅读：7896
在很多电商类型网站中，在购物车所在页面，涉及到商品数量的时候，都会提供一个+号按钮和-号按钮来实现增1和减1，并且只允许input中输入数值。
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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="../js/jquery-1.11.3.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>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论