欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

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

程序员文章站 2022-06-17 12:50:37
...
项目中自己写的,用于点击增减按钮来改变input框中的值,完全可以通用,一个页面上也可以有多个,可用于购物车,可设置最大最小值,及每次的增减值,当然也可以不设置,本人小白,不足之处请见谅
jQuery实现 Input 数量的加减,可用于购物车$(function() {
/**
* 通用
* 购物车加一减一
* data-min为最小值,data-max为最大值,data-step为步长(默认为1,或不设置,步长即为每操作一下“加”或“减”的数值)
* 不加data-min和data-max则无限制
* HTML:
*


*
* +
* -
*


* 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 _new_value = _min;
element.addClass('disabled');
}
}
_input.val( _new_value );
}
});

jQuery实现 Input 数量的加减,可用于购物车 input.up.down.zip ( 1.28 KB 下载:85 次 )

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