商城中 购物数量 加减的实现

实现的效果：

  默认是数量1 左边减号是不可用 最低是1，然后是情况是否有最大数量 同样最大 不能增加~  

实例图

HTML

 <dd class="goods-num">
                    <span>数量：</span>
                <span>
                    <a href="#" class="del-num" >-</a>
                    <input type="text" value="1" maxlength="8" title="请输入购买数量" id="buy-num" name="buytxt" />
                    <a href="#" class="add-num">+</a>
                </span>
                </dd>

这个貌似还是要CSS的

/*购买商品数量*/
#goods-sale-info dd.goods-num{
    border-top:1px solid #eaeaea;
    margin-top: 10px;
    padding-top: 30px;
}
  #goods-sale-info dd{
    line-height: 29px;
    width: 100%;
     overflow: hidden;

}
#goods-sale-info dd.goods-num span {
    display: inline;
    position: relative;
    float: left;
}
#goods-sale-info dd.goods-num span a.del-num{
    cursor:not-allowed;
    color: #ccc;
   background: #ededed;
}
#goods-sale-info dd.goods-num span a{
    display: block;
    float: left;
    width: 26px;
    height: 26px;
    border: 1px solid #cccccc;
    line-height: 26px;
    outline: 0px;
    vertical-align:top;
    text-align: center;
    overflow: hidden;
}

#goods-sale-info dd.goods-num span #buy-num{

/*输入购买数量框*/
display: inline;
float: left;
width: 48px;
height: 26px;
font-size: 16px;
line-height: 26px;
text-align: center;
color: #666;
border: 1px solid #ccc;
outline: 0px;
background: #fff;
}

 

 

 

JS  要先加载jquery

<script type="text/javascript">
    /*参考网址 http://www.hicha.com/tea-817.html */
    $(function() {

        /* 绑定 减少数量事件 */
        $( '#goods-sale-info .del-num' ).click(function() {
            /*点击减少按钮 首先获取本身的input值 然后值在减去1
             * 检查数量是否最小
             *
             * */


            var val = parseInt( $( '#goods-sale-info input[name=buytxt]' ).val() ) || 1;
            $( '#goods-sale-info input[name=buytxt]' ).val( val - 1 )
            check_num();
            return false;
        });
        /*绑定 增加数量 事件*/
        $( '#goods-sale-info .add-num' ).click(function() {
            /*点击增加按钮 首先获取本身的input值 然后值在加上1
             * 检查数量是否最大
             *
             * */
            var val = parseInt( $( '#goods-sale-info input[name=buytxt]' ).val() ) || 1;
            $( '#goods-sale-info input[name=buytxt]' ).val( val + 1 )
            check_num();
            return false;
        });


        $( '#goods-sale-info input[name=buytxt]' ).keyup(function( e ) {
            this.value = this.value.trim().replace( /[^0-9]/g, '' );
            check_num();
        }).blur( function() {
            check_num();
        } );
    })

    /* 商品加减 数量*/
    function check_num()
    {
        /* 获取input 输入框的值 默认为1 */
        var val = parseInt( $( '#goods-sale-info input[name=buytxt]' ).val() ) || 1;
        /* 最小值为1 */
        if( val < 1 ) val = 1;
        /*最大值*/
        var max = parseInt( $( '#nAmount' ).val() );
        /* 减少 触发check_num函数时候是没有disabled属性的*/
        $( '#goods-sale-info .del-num' ).removeClass( 'disabled' )[0].removeAttribute( 'disabled' );
        /* 增加*/
        $( '#goods-sale-info .add-num' ).removeClass( 'disabled' )[0].removeAttribute( 'disabled' );
        /*商品数量小于1的时候*/
        if( val <= 1 )
        {
            /*输入值为1 */
            $( '#goods-sale-info input[name=buytxt]' ).val( 1 )
            /*禁止在减少 元素为disabled*/
            $( '#goods-sale-info .del-num' ).addClass( 'disabled' )[0].setAttribute( 'disabled', 'disabled' );
        }
        /*商品数量为最大值的时候*/
        if( val >= max )
        {
            /*输入值最大设置值  并且 增加元素为不可用*/
            $( '#goods-sale-info input[name=buytxt]' ).val( max )
            $( '#goods-sale-info .add-num' ).addClass( 'disabled' )[0].setAttribute( 'disabled', 'disabled' );
        }
    }


</script>