jQuery实现 Input 数量的加减，可用于购物车
- WBOYOriginal
- 2016-06-07 11:37:361590Durchsuche
项目中自己写的，用于点击增减按钮来改变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元