jq数量加减效果

html:

        <div class="num">
                   <input type="button" class="minus" />
                   <input type="text" class="inputBorder" value="1" />
                   <input type="button" class="add" />
       </div>

css:

        <style="text/css">

input[type="button"] { border:none;cursor: pointer;}

.num {border:1px solid;overflow:hidden;width: 100px;}

/*减号*/
.minus {
    background: url("images/minus.jpg") no-repeat;
    float: left;
    height: 15px;
    vertical-align: middle;
    width: 15px;
}


/*数量*/
.inputBorder {
    float: left;
    height: 15px;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    width: 27px;
}
/*加号*/
.add {
    background: url("images/add.jpg") no-repeat;
    float: left;
    height: 15px;
    vertical-align: middle;
    width: 15px;
}

        </style>

js:

<script>
$(function(){
//加号
$(".add").click(function(){
var $parent=$(this).parent(".num");
var $num=window.Number($(".inputBorder",$parent).val());
$(".inputBorder",$parent).val($num+1);
});

//减号
$(".minus").click(function(){
var $parent=$(this).parent(".num");
var $num=window.Number($(".inputBorder",$parent).val());
if($num>2){
$(".inputBorder",$parent).val($num-1);
}else{
$(".inputBorder",$parent).val(1);
}
});
})


</script>

左边减号和右边加号均为背景图片