jQuery实现 Input 数量的加减，可用于购物车

jerry thinkphp 2015年11月19日收藏

项目中自己写的，用于点击增减按钮来改变input框中的值，完全可以通用，一个页面上也可以有多个，可用于购物车，可设置最大最小值，及每次的增减值，当然也可以不设置，本人小白，不足之处请见谅

$(function() {

    /**

     * 通用

     * 购物车加一减一

     * data-min为最小值，data-max为最大值，data-step为步长（默认为1，或不设置，步长即为每操作一下“加”或“减”的数值）

     * 不加data-min和data-max则无限制

     * HTML：

     *      <p class="cart-number-box">

     *            <input type="text" value="1" name="number" data-min="1" data-max="5" data-step="2">

     *            <i class="up input-num-up">+</i>

     *            <i class="down input-num-down">-</i>

     *        </p>

     * CSS：

     *      .cart-number-box { position: relative; }

     *        .cart-number-box input { width: 60px; height: 27px; margin-left: 26px; text-align: center; }

     *        .cart-number-box input,

     *        .cart-number-box .up,

     *        .cart-number-box .down { border: 1px solid #aaa; }

     *        .cart-number-box .up,

     *        .cart-number-box .down { position: absolute; display: block; width: 27px; height: 27px; top: 0; text-align: center; line-height: 23px; font-style: normal; cursor: pointer; }

     *        .cart-number-box .up { left: 85px; }

     *      .disabled { cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65 }

     * DATE:2015.8.3

     */

    $('.input-num-up').click(function(){

        upDownOperation( $(this) );

    });


    $('.input-num-down').click(function(){

        upDownOperation( $(this) );

    });


    function upDownOperation(element)

    {

        var _input = element.parent().find('input'),

            _value = _input.val(),

            _step = _input.attr('data-step') || 1;


        //检测当前操作的元素是否有disabled，有则去除

        element.hasClass('disabled') && element.removeClass('disabled');


        //检测当前操作的元素是否是操作的添加按钮（.input-num-up）‘是’ 则为加操作，‘否’ 则为减操作

        if ( element.hasClass('input-num-up') )

        {

            var _new_value = parseInt( parseFloat(_value) + parseFloat(_step) ),

                _max = _input.attr('data-max') || false,

                _down = element.parent().find('.input-num-down');

            

            //若执行‘加’操作且‘减’按钮存在class='disabled'的话，则移除‘减’操作按钮的class 'disabled'

            _down.hasClass('disabled') && _down.removeClass('disabled');

            if (_max && _new_value >= _max) {

                _new_value = _max;

                element.addClass('disabled');

            }

        } else {

            var _new_value = parseInt( parseFloat(_value) - parseFloat(_step) ),

                _min = _input.attr('data-min') || false,

                _up = element.parent().find('.input-num-up');


            //若执行‘减’操作且‘加’按钮存在class='disabled'的话，则移除‘加’操作按钮的class 'disabled'

            _up.hasClass('disabled') && _up.removeClass('disabled');

            if (_min && _new_value <= _min) {

                _new_value = _min;

                element.addClass('disabled');

            }

        }

        _input.val( _new_value );

    }

});