左右数字加减（范围为0-9），用jQuery写的正常，为什么用zepto就会一直加会超过9，一直减会出现负数。
在做一个购物车左右数字加减的功能，用jQuery库写出来的可以在（0-9）的范围正常加减并且不会超出范围。
我想在移动端中使用zepto库，然后在原来的基础上做了点改动，改完以后无论是加减事件都会超出（0-9）这个范围，上代码求指点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
*{margin:0;padding: 0;}
.mui-numbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 120px;
height: 35px;
padding: 0 40px;
vertical-align: top;
vertical-align: middle;
border: solid 1px #bbb;
border-radius: 3px;
background-color: #efeff4;
box-sizing: border-box;
}
.mui-numbox .mui-numbox-btnleft,
.mui-numbox .mui-numbox-btnright{
font-size: 18px;
font-weight: 400;
line-height: 100%;
position: absolute;
top: 0;
overflow: hidden;
width: 40px;
height: 100%;
padding: 0;
color: #555;
border: none;
border-radius: 0;
background-color: #f9f9f9;
display: inline-block;
text-align: center;
transition-duration: .2s;
vertical-align: top;
white-space: nowrap;
background-clip: padding-box;
outline: none;
}
.mui-numbox .mui-numbox-btnleft{
left: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mui-numbox #text_box{
display: inline-block;
overflow: hidden;
width: 100%!important;
height: 100%;
margin: 0;
padding: 0 3px!important;
text-align: center;
text-overflow: ellipsis;
word-break: normal;
border: none!important;
border-right: solid 1px #ccc!important;
border-left: solid 1px #ccc!important;
border-radius: 0!important;
line-height: 21px;
outline: 0;
background-color: #fff;
-webkit-appearance: none;
-webkit-user-select: text;
box-sizing: border-box;
}
.mui-numbox .mui-numbox-btnright{
right: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mui-numbox .mui-numbox-btnleft.mui-numbox-btn-minus,
.mui-numbox .mui-numbox-btnright.mui-numbox-btn-maxus{
color:silver;
}
</style>
</head>
<body>
<div class="mui-numbox">
<input id="min" class="mui-numbox-btnleft" name="" type="button" value="-" />
<input id="text_box" name="" type="text" value="4" />
<input id="add" class="mui-numbox-btnright" name="" type="button" value="+" />
</div>
</body>
</html>
<!--jquery库 实现的效果-->
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.min.js"></script>
<script>
$(function(){
//获得文本框对象
var t = $("#text_box");
//数量增加操作
$("#add").click(function(){
t.val(parseInt(t.val())+1);
if (parseInt(t.val())==9){
$('#add').attr('disabled',true);
$('#min').attr('disabled',false);
}
});
//数量减少操作
$("#min").click(function(){
t.val(parseInt(t.val())-1);
if (parseInt(t.val())==0){
$('#min').attr('disabled',true);
$('#add').attr('disabled',false);
}
});
})
</script>
<!--期望用zepto库实现效果 但是有问题需要大家帮忙指正的代码-->
<script type="text/javascript" src="js/zepto.js"></script>
<script>
Zepto(function($) {
//获得文本框对象
var t = $("#text_box");
//数量增加操作
$("#add").tap(function(){
t.val(parseInt(t.val())+1);
if (parseInt(t.val())==9){
$('#add').attr('disabled',true);
$('#min').attr('disabled',false);
}
});
//数量减少操作
$("#min").tap(function(){
t.val(parseInt(t.val())-1);
if (parseInt(t.val())==0){
$('#min').attr('disabled',true);
$('#add').attr('disabled',false);
}
});
})
</script>
展开
收起
1
条回答
写回答
写回答
-
IT从业$(选择符)这种耗时操作，还是放在判断里去做；
<script> Zepto(function($) { //获得文本框对象 var t = $("#text_box")，add = $('#add'),min = $('#min'); //数量增加操作 add.tap(function(){ if (parseInt(t.val())<=9){ t.val(parseInt(t.val())+1); min.attr('disabled',true); add.attr('disabled',false); } }); //数量减少操作 min.tap(function(){ if (parseInt(t.val())>1){ t.val(parseInt(t.val())-1); min.attr('disabled',true); add.attr('disabled',false); } }); }) </script>2019-07-17 19:35:35赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
