文本框数量加减功能

Posted 2020-09-24 小太阳wy927

 此功能相当于购物车加减功能：

<div class="_stepper">
　　<input type="text" value="30" class="stepper_input" />
　　<em class="up" id="numAdd" value="加"></em>
　　<em class="down" id="numDec" value="减"></em>
</div>

css

._stepper{display:inline-block;position:relative;margin-right:10px; }
.stepper_input{ background: #fff; border: 1px solid #ddd;width:150px;height:34px;color: #697082;padding-left:10px;}
._stepper .up,._stepper .down{position:absolute; cursor: pointer;width:36px;height:17px; border: 1px solid #ddd;text-indent: -99999px; background:#f8fbfe;}
._stepper .up{background: #fff url(../../../Content/images/_register/up.png) no-repeat; background-position:center;top:0px;right:0;}
._stepper .down{background: #fff url(../../../Content/images/_register/down.png) no-repeat; background-position: center; bottom:0px;right:0; }

　　 //加的效果
        $("#numAdd").click(function () {
            var n = $(".stepper_input").val();
            if (n < 30) {
                var num = parseInt(n) + 1;
                if (num == 0) { return; }
                $(".stepper_input").val(num);
            }

        });

        //减的效果
        $("#numDec").click(function () {
            var n = $(".stepper_input").val();
            if (n > 2) {
                var num = parseInt(n) - 1;
                if (num == 0) { return }
                $(".stepper_input").val(num);
            }
        });

　　

效果