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

项目中自己写的，用于点击增减按钮来改变input框中的值，完全可以通用，一个页面上也可以有多个，可用于购物车，可设置最大最小值，及每次的增减值，当然也可以不设置，本人小白，不足之处请见谅
$(function() {<br>     /**<br>      * 通用<br>      * 购物车加一减一<br>      * data-min为最小值，data-max为最大值，data-step为步长（默认为1，或不设置，步长即为每操作一下“加”或“减”的数值）<br>      * 不加data-min和data-max则无限制<br>      * HTML：<br>      *      <p><br>      *            <input><br>      *            <i>+</i><br>      *            <i>-</i><br>      *        </p> <br>      * CSS：<br>      *      .cart-number-box { position: relative; }<br>      *        .cart-number-box input { width: 60px; height: 27px; margin-left: 26px; text-align: center; }<br>      *        .cart-number-box input,<br>      *        .cart-number-box .up,<br>      *        .cart-number-box .down { border: 1px solid #aaa; }<br>      *        .cart-number-box .up,<br>      *        .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; }<br>      *        .cart-number-box .up { left: 85px; }<br>      *      .disabled { cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65 }<br>      * DATE:2015.8.3<br>      */<br>     $('.input-num-up').click(function(){<br>         upDownOperation( $(this) );<br>     });<br> <br>     $('.input-num-down').click(function(){<br>         upDownOperation( $(this) );<br>     });<br> <br>     function upDownOperation(element)<br>     {<br>         var _input = element.parent().find('input'),<br>             _value = _input.val(),<br>             _step = _input.attr('data-step') || 1;<br> <br>         //检测当前操作的元素是否有disabled，有则去除<br>         element.hasClass('disabled') && element.removeClass('disabled');<br> <br>         //检测当前操作的元素是否是操作的添加按钮（.input-num-up）‘是’ 则为加操作，‘否’ 则为减操作<br>         if ( element.hasClass('input-num-up') )<br>         {<br>             var _new_value = parseInt( parseFloat(_value) + parseFloat(_step) ),<br>                 _max = _input.attr('data-max') || false,<br>                 _down = element.parent().find('.input-num-down');<br>             <br>             //若执行‘加’操作且‘减’按钮存在class='disabled'的话，则移除‘减’操作按钮的class 'disabled'<br>             _down.hasClass('disabled') && _down.removeClass('disabled');<br>             if (_max && _new_value >= _max) {<br>                 _new_value = _max;<br>                 element.addClass('disabled');<br>             }<br>         } else {<br>             var _new_value = parseInt( parseFloat(_value) - parseFloat(_step) ),<br>                 _min = _input.attr('data-min') || false,<br>                 _up = element.parent().find('.input-num-up');<br> <br>             //若执行‘减’操作且‘加’按钮存在class='disabled'的话，则移除‘加’操作按钮的class 'disabled'<br>             _up.hasClass('disabled') && _up.removeClass('disabled');<br>             if (_min && _new_value                  _new_value = _min;<br>                 element.addClass('disabled');<br>             }<br>         }<br>         _input.val( _new_value );<br>     }<br> });

input.up.down.zip ( 1.28 KB 下载：85 次 )

AD：真正免费，域名+虚机+企业邮箱=0元