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"/>
分享到:
相关推荐
通过对上述代码的详细解析,我们可以清楚地看到电商购物数量加减功能是如何通过JavaScript(特别是jQuery)实现的。这种实现方式不仅简单易懂,还具有良好的用户体验。开发者可以根据实际需求进一步优化和完善这一...
在电商网站上,购物车是用户进行商品购买的核心部分,其中的数量加减选择器是用户调整选购商品数量的重要交互元素。这个"购物车-购买时数量加减选择器"的功能设计和实现涉及到前端开发、用户体验设计以及交互逻辑等...
"ecshop 购物车页添加购买数量加减按钮" 是一个针对ECSHOP电商平台的优化插件,旨在提升用户在购物车操作时的便利性。ECSHOP是一款流行的开源电子商务系统,它提供了一整套完善的在线购物解决方案。通过这个插件,...
这个源码下载的主题是"文本框数量加减带总金额计算效果",这涉及到一个常见的电商或购物网站功能,即动态更新商品总价。当用户在输入框中增加或减少商品数量时,系统会实时计算并显示总金额。这种功能提供了即时反馈...
在电商网站中,购物车数量加减控件是用户交互的核心元素之一,它允许用户方便地调整所选商品的数量。本教程将详细讲解如何创建一个类似京东购物车中的数量加减控件,涵盖其功能实现、UI设计以及交互逻辑。 首先,...
在网页开发中,购物商城的商品数量加减功能是一项常见的交互设计,它使用户能够轻松地调整购买商品的数量。本篇文章将详细解读“jQuery仿购物商城商品数量加减代码”这一主题,通过分析压缩包中的js、index.html和...
本教程将详细讲解如何使用 jQuery 实现文本框中的数量加减功能,这一功能常用于电商网站的商品购买数量调整等场景。 一、jQuery 基础 在开始之前,确保已经在项目中引入了 jQuery 库。可以通过以下方式在 HTML ...
本文将详细讨论如何实现“购物车数量加减”以及如何统计选中商品的数量和总价,这些都是购物车功能的核心组成部分。 首先,我们关注“数量加减”这个知识点。在购物车列表中,每个商品项通常会有一个数量输入框,...
**jQuery仿购物商城商品数量加减代码详解** 在电商网站中,用户在选择商品时,经常需要调整购买的数量。为了提供良好的用户体验,一种常见的做法是使用动态的加减按钮来控制购物车中商品的数量。本篇文章将深入解析...
《jQuery仿淘宝天猫商品数量加减js代码解析与实践》 在网页开发中,用户交互体验是提升网站质量的关键因素之一。特别是在电商网站上,商品数量的增减功能是购物车模块的重要组成部分,它需要简洁易用且反应迅速。本...
jQuery数字加减插件是一个增强网页表单输入体验的有效工具,尤其适合电商、库存管理等需要频繁调整数量的场景。通过结合Bootstrap或jQuery UI的样式,它可以轻松融入现有的项目中,提升用户界面的美观度和功能性。在...
- JavaScript文件:这部分代码处理用户的加减操作,与服务器进行交互更新购物车商品的数量。 **5. 测试和优化** 安装和修改后,务必在前端进行测试,确保加减功能正常工作,并检查是否有任何样式问题或JavaScript...
在电商网站中,购物车是用户与商品交互的重要环节,其中的加减功能是核心功能之一,它确保了用户能够方便地调整所选商品的数量。本文将深入探讨购物车加减功能的实现,包括设计思路、前端实现、后端处理以及数据库...
《jQuery Spinner:数量加减插件的深度解析与应用》 在Web开发中,用户界面的交互性至关重要,其中一种常见的交互元素就是数量输入框,它允许用户通过加减按钮来增减数值。jQuery Spinner插件是实现这种功能的一个...
在本文中,我们将深入探讨如何使用jQuery来实现一个商品数量加减功能,这通常用于电商网站的商品购物车页面。jQuery是一种强大的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得创建交互式网页变得更加...
"购物车加减"插件解决了这个问题,使得用户能够快速调整购物车中的商品数量,提升了购物流程的效率。 该插件的实现可能涉及到以下几个技术点: 1. **前端交互**:前端代码需要响应用户的点击事件,根据"+"和"-...
《jQuery Spinner:构建数字智能加减插件的深入解析》 在Web开发中,用户界面的交互性至关重要,而数字输入框(Spinner)是提升用户体验的一种常见方式。它允许用户通过点击按钮或直接输入数值来增加或减少数字,...
在Vue.js中实现商品加减计算总价的功能是一个常见的电商应用需求。这个实例代码演示了如何在用户选择商品并调整数量时动态计算总价。下面我们将详细解释这个实例中的关键点。 首先,HTML结构是整个功能的基础。`...
在购物车的场景下,每个商品项可能都有一个`ng-repeat`来迭代显示,而商品数量的加减按钮可以绑定`ng-click`事件,触发相应函数来更新模型数据。 代码结构可能如下: 1. HTML部分: - 使用`ng-repeat`遍历购物车...
2. **商品管理**:购物车应支持用户对已添加的商品进行编辑,如更改数量、删除商品或将其标记为收藏。 3. **价格计算**:购物车需要实时计算商品总价,包括单件商品价格、优惠后的价格、以及购物车总价。 4. **...