js 购买数量的加减修改（电商购买数量）

jQuery数量控制器

最新推荐文章于 2021-05-31 14:37:47 发布

原创最新推荐文章于 2021-05-31 14:37:47 发布 · 911 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #加减 #电子商务 #ViewUI

javascript-->>备忘笔记专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的数量控制器脚本，该脚本可以确保输入框内的数值处于预定义的最小值和最大值之间，并且只能输入整数。当用户尝试更改输入框的值时，脚本会验证输入的有效性并显示相应的提示信息。

jQuery.extend( {
	min : 1,
	reg : function(x) {
		jQuery('#J_Tip').html("");
		jQuery('#J_Tip').hide();
		return new RegExp("^[1-9]\\d*$").test(x);
	},
	amount : function(obj, mode) {
		var x = jQuery(obj).val();
		if (this.reg(parseInt(x))) {
			if (mode) {
				x++;
			} else {
				x--;
			}
		} else {
			jQuery('#J_Tip').html("<i class=\"ico\"></i>请输入正确的数量！");
			jQuery('#J_Tip').show();
			jQuery(obj).val(1);
			jQuery(obj).focus();
		}
		return x;
	},
	reduce : function(obj) {
		var x = this.amount(obj, false);
		if (parseInt(x) >= this.min) {
			jQuery(obj).val(x);
		} else {
			jQuery('#J_Tip').html("<i class=\"ico\"></i>商品数量最少为" + this.min
					+ "！");
			jQuery('#J_Tip').show();
			jQuery(obj).val(1);
			jQuery(obj).focus();
		}
	},
	add : function(obj) {
		var x = this.amount(obj, true);
		var max = jQuery('#nAmount').val();
		if (parseInt(x) <= parseInt(max)) {
			jQuery(obj).val(x);
		} else {
			jQuery('#J_Tip').html("<i class=\"ico\"></i>您所填写的商品数量超过库存！");
			jQuery('#J_Tip').show();
			jQuery(obj).val(max == 0 ? 1 : max);
			jQuery(obj).focus();
		}
	},
	modify : function(obj) {
		var x = jQuery(obj).val();
		var max = jQuery('#nAmount').val();
		if (!this.reg(parseInt(x))) {
			jQuery(obj).val(1);
			jQuery(obj).focus();
			jQuery('#J_Tip').html("<i class=\"ico\"></i>请输入正确的数量！");
			jQuery('#J_Tip').show();
			return;
		}
		var intx = parseInt(x);
		var intmax = parseInt(max);
		if (intx < this.min) {
			jQuery('#J_Tip').html("<i class=\"ico\"></i>商品数量最少为" + this.min
					+ "！");
			jQuery('#J_Tip').show();
			jQuery(obj).val(this.min);
			jQuery(obj).focus();
		} else if (intx > intmax) {
			jQuery('#J_Tip').html("<i class=\"ico\"></i>您所填写的商品数量超过库存！");
			jQuery('#J_Tip').show();
			jQuery(obj).val(max == 0 ? 1 : max);
			jQuery(obj).focus();
		}
	}
});
 
使用方式：


<span class="li_hd">购买数量：</span>
        <a class="num_oper num_min" href="javascript:jQuery.reduce('#J_Amount');">-</a>
        <input name="J_Amount" id="J_Amount" class="input_txt" type="text" maxlength="6" value="1" onkeyup="jQuery.modify('#J_Amount');"/>
		<a class="num_oper num_plus" href="javascript:jQuery.add('#J_Amount')">+</a>
        <p class="caution_tips" id="J_Tip" style="display:none;"></p>
		<input id="nAmount" type="hidden" value="10"/>