文本框数量加减功能
此功能相当于购物车加减功能:
<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); } });
效果