Rumah >php教程 >php手册 >jQuery实现 Input 数量的加减,可用于购物车

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

WBOY
WBOYasal
2016-06-07 11:37:361632semak imbas

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:自定义标签入门Artikel seterusnya:PHP实现快速排序效果