javascript - 左右数字加减（范围为0-9），用jQuery写的正常，为什么用zepto就会一直加会超过9，一直减会出现负数。
本文介绍了javascript - 左右数字加减（范围为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>解决方案
$(选择符)这种耗时操作，还是放在判断里去做；
<script type="text/javascript" src="js/zepto.js"></script>
<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>这篇关于javascript - 左右数字加减（范围为0-9），用jQuery写的正常，为什么用zepto就会一直加会超过9，一直减会出现负数。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
