此功能相当于购物车加减功能:
<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;150px;height:34px;color: #697082;padding-left:10px;}
._stepper .up,._stepper .down{position:absolute; cursor: pointer;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);
}
});
效果
