左右数字加减(范围为0-9),用jQuery写的正常,为什么用zepto就会一直加会超过9,一直减会出现负数。 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

左右数字加减(范围为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>

展开
收起
杨冬芳 2016-06-13 11:54:40 2452 0
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
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载