jquery实现 购物车 信息 级联改变

最新推荐文章于 2022-11-24 16:12:11 发布
最新推荐文章于 2022-11-24 16:12:11 发布
阅读量155 收藏
点赞数
分类专栏： java web 文章标签： jquery JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaomao267/article/details/84431160
版权
本文介绍了一个使用jQuery实现的购物车示例，展示了如何通过简单的页面交互实时更新商品数量及总价。该示例对原始代码进行了改进，增强了数字验证功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转载的一个jquery实现购物车信息级联改变的例子，修改了部分js代码，包括去掉几个没有用到的方法，以及修改了验证数字的方法，原来的无法判断几个小数点，现在用正则表达式进行判断。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
	google.load("jquery", "1.2.6");
</script>
<script type="text/javascript" src="order.js"></script>
</head>
<body>
	<table id="order-table">
		<tr>
			<th>Product Name</th>
			<th>Quantity</th>
			<th>X</th>
			<th>Unit Price</th>
			<th>=</th>
			<th style="text-align: right;">Totals</th>
		</tr>
		<tr class="odd">
			<td class="product-title">www.corange.cn<em></em>
			</td>
			<td class="num-pallets"><input type="text" class="num-pallets-input" id="turface-pro-league-num-pallets"> </input></td>
			<td class="times">X</td>
			<td class="price-per-pallet">$<span>340</span>
			</td>
			<td class="equals">=</td>
			<td class="row-total"><input type="text" class="row-total-input" id="turface-pro-league-row-total" disabled="disabled"> </input></td>
		</tr>
		<tr class="even">
			<td class="product-title"><p>
					Turface&reg; Pro League Red - <em>Calcined Clay Top Dressinged</em>
				</p>
				<p>&nbsp;</p>
			</td>
			<td class="num-pallets"><input type="text" class="num-pallets-input" id="turface-pro-league-red-num-pallets"> </input></td>
			<td class="times">X</td>
			<td class="price-per-pallet">$<span>455</span>
			</td>
			<td class="equals">=</td>
			<td class="row-total"><input type="text" class="row-total-input" id="turface-pro-league-red-row-total" disabled="disabled"> </input>
			</td>
		</tr>
		<tr class="odd">
			<td class="product-title">Turface&reg; Quick Dry - <em>Calcined Clay Moisture Absorbent</em>
			</td>
			<td class="num-pallets"><input type="text" class="num-pallets-input" id="turface-quick-dry-num-pallets"> </input></td>
			<td class="times">X</td>
			<td class="price-per-pallet">$<span>100</span>
			</td>
			<td class="equals">=</td>
			<td class="row-total"><input type="text" class="row-total-input" id="turface-quick-dry-row-total" disabled="disabled"> </input></td>
		</tr>
		<tr class="even">
			<td class="product-title">Turface&reg; Mound Clay Red - <em>Virgin Red Clay</em>
			</td>
			<td class="num-pallets"><input type="text" class="num-pallets-input" id="turface-mound-clay-red-num-pallets"> </input></td>
			<td class="times">X</td>
			<td class="price-per-pallet">$<span>40</span>
			</td>
			<td class="equals">=</td>
			<td class="row-total"><input type="text" class="row-total-input" id="turface-mound-clay-red-row-total" disabled="disabled"> </input>
			</td>
		</tr>
		<tr class="odd">
			<td class="product-title">Red Infield Conditioner - <em>Vitrified Clay Top Dressing</em>
			</td>
			<td class="num-pallets"><input type="text" class="num-pallets-input" id="diamond-pro-red-num-pallets"> </input></td>
			<td class="times">X</td>
			<td class="price-per-pallet">$<span>35</span>
			</td>
			<td class="equals">=</td>
			<td class="row-total"><input type="text" class="row-total-input" id="diamond-pro-red-row-total" disabled="disabled"> </input></td>
		</tr>
		<tr class="even">
			<td class="product-title">Drying Agent - <em>Calcined Clay Moisture Absorbent</em>
			</td>
			<td class="num-pallets"><input type="text" class="num-pallets-input" id="diamond-pro-drying-agent-num-pallets"> </input></td>
			<td class="times">X</td>
			<td class="price-per-pallet">$<span>340</span>
			</td>
			<td class="equals">=</td>
			<td class="row-total"><input type="text" class="row-total-input" id="diamond-pro-drying-agent-row-total" disabled="disabled"> </input></td>
		</tr>
		<tr class="odd">
			<td class="product-title">Professional - <em>Calcined Clay Top Dressing</em>
			</td>
			<td class="num-pallets"><input type="text" class="num-pallets-input" id="diamond-pro-professional-num-pallets"> </input></td>
			<td class="times">X</td>
			<td class="price-per-pallet">$<span>75</span>
			</td>
			<td class="equals">=</td>
			<td class="row-total"><input type="text" class="row-total-input" id="diamond-pro-professional-row-total" disabled="disabled"> </input></td>
		</tr>
		<tr class="even">
			<td class="product-title">Top Dressing - <em>Calcined Clay Soil Conditioner</em>
			</td>
			<td class="num-pallets"><input type="text" class="num-pallets-input" id="diamond-pro-top-dressing-num-pallets"> </input></td>
			<td class="times">X</td>
			<td class="price-per-pallet">$<span>30</span>
			</td>
			<td class="equals">=</td>
			<td class="row-total"><input type="text" class="row-total-input" id="diamond-pro-top-dressing-row-total" disabled="disabled"> </input></td>
		</tr>
		<tr>
			<td colspan="6" style="text-align: right;">Product SUBTOTAL: <input type="text" class="total-box" id="product-subtotal" disabled="disabled"> </input></td>
		</tr>
	</table>
</body>
</html>

 

function isNumeric(str) {
	if (isInteger(str))
		return true;
	var re = /^[]{0,1}(\d+)[\.]+(\d+)$/;
	if (re.test(str)) {
		if (RegExp.$1 == 0 && RegExp.$2 == 0)
			return false;
		return true;
	} else {
		return false;
	}
}

function isInteger(str) {
	var regu = /^[]{0,1}[0-9]{1,}$/;
	return regu.test(str);
}

function calcProdSubTotal() {

	var prodSubTotal = 0;

	$(".row-total-input").each(function() {

		var valString = $(this).val() || 0;

		prodSubTotal += parseInt(valString);

	});

	$("#product-subtotal").val(prodSubTotal);

};

$(function() {

	$('.num-pallets-input').blur(
			function() {

				var $this = $(this);

				var numPallets = $this.val();
				var multiplier = $this.parent().parent().find("td.price-per-pallet span").text();

				if ((isNumeric(numPallets)) && (numPallets != '')) {

					var rowTotal = numPallets * multiplier;

					$this.css("background-color", "white").parent().parent()
							.find("td.row-total input").val(rowTotal);

				} else {

					$this.css("background-color", "#ffdcdc");
					$this.parent().parent().find("td.row-total input").val("");
				}
				;

				calcProdSubTotal();

			});

});

 

利用jQuery实现购物车功能
荒的博客
04-27 2万+
购物车----jQuery h1 { text-align:center; } table { margin:0 auto; width:60%; border:2px solid #aaa; border-collapse:collapse; }
使用jquery实现购物车的添加与删除。
gods_boy的博客
01-02 6216
  要点分析： 1.当购物车里面不存在商品时点击添加商品可以添加进去。 2.当购物车里面存在商品时点击添加商品时会有两种情况。第一种就是购物车里面不存在这种商品可以进行添加。第二种就是如果你想添加的商品购物车本身就存在，那么就需要判重，进行商品个数累加。 3.商品进行全选或者取消。 当你选择全选按钮时，购物车里面的商品全选，如果取消其中的一件商品全选也会被取消，同样，当点击全部单个商品时全选按钮...
jQuery实现购物车的增删改查
每天一个前端小知识~
11-05 2677
一、购物车页面效果图 shop-cart.html的代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>北榛购物车</title> <!-- 引入css 初始化的css 文件 --> <link rel="stylesheet" href="css/base.css"> <!-- 引
jquery练习——购物车
RBreeze的博客
08-13 5613
购物车练习总结 初学练习，收货颇多。两个方便，一部分是技术知识上的，一部分是开发思路上的。 整个练习的业务逻辑包括： 1.动态的通过按钮添加商品，商品名价格等随机产生 2.实现全选按钮点击事件（反选取消全选） 3.实现复选框点击事件 4.实现数量加减按钮点击事件 5.实现文本框数量改变事件 6.实现删除操作 商品内容包括如下： 在开始写的时候并没有做任何分析，仅仅是用一...
jQuery购物车多选框三级联动
m0_66128306的博客
11-24 484
仿淘宝购物车 多选框三级联动 仅限于实现功能
javaScript商城实现购物车思路
u014739462的博客
04-27 9340
商城实现购物车思路体验流程 (1)：用户一个一个商品的勾选，当摸个店铺下的商品选满则要将该店铺选中，否则不选中该店铺。在所有店铺选满以后，标记选中全选按钮，否则不选中全选按钮。 (2)：用户一个店铺一个店铺的勾选，这时要选中标记选中店铺下的所有商品，反之不选中。在所有店铺选满以后，标记选中全选按钮，否则不选中全选按钮。 (3)：直接勾选全选按钮，这时要选中所有商品和店铺，反之则不选中。 (3
Java购物车的实现逻辑和源码
微笑的博客
04-13 2979
使用的工具介绍   开发工具：idea、MySQL   开发技术：spring boot、mybatis、thymeleaf   使用插件：jQuery省市区三级连、bootstrap模态框 最近做了一个关于商品类型的一个购物车的demo，现在做个记录,其实购物车是商城类项目的核心，而购物车的核心可以说是批量操作，购物车一次操作可以购买多件商品所以必须要进行批量操作。（下面直接看例子） 如上图...
android长按加入购物车,Android仿饿了么点餐页面 分类和商品级联滑动定位 添加购物车动...
weixin_30533301的博客
05-25 387
满意答案Pinxrwqr2017.10.18采纳率：58%等级：8已帮助：1262人//我没有用jquery，我这里没有jquery的插件直接用js写的，你自己改成jquery就行。 把文字替换成图片就行。Document*{margin:0px;padding:0;}div #div1{width:300px;height : 300px;float : left;background ...
JavaWeb.md5加密与MVC购物车
m0_68126539的博客
04-25 202
(一)一共有四个表，表与表之间关联，(用户表,订单表，订单项目表，购物车表) 四个表的ID都设置为主键 (二)实体类数据类型要用：引用数据类型 (三)md5加密
使用jquery实现购物车信息级联变化的技术细节
综上所述，使用jQuery实现购物车信息的级联改变需要掌握jQuery的基础操作、事件处理、DOM操作和数据处理等技能。此外，还需要注意代码的性能优化和跨浏览器兼容性问题。通过本例中的知识点梳理，开发者可以更加清晰...
深度强化学习：DDPG、TD3、SAC与机器人MuJoCo
05-03
内容概要：本文详细介绍了三种主流的深度强化学习算法-DDPG、TD3和SAC在机器人控制领域的应用，特别是在MuJoCo仿真环境中的实现细节。首先解释了每个算法的基本原理及其独特之处，如DDPG的确定性策略生成器、TD3的双Critic网络以及SAC的熵最大化机制。接着深入探讨了这些算法的具体代码实现，包括Actor和Critic网络的设计、损失函数的构建以及一些实用的调参技巧。此外，还分享了许多实战经验和常见陷阱，如正确处理done信号、添加动作变化量惩罚项、观测空间的归一化等。 适合人群：对深度强化学习有一定了解并希望深入了解其在机器人控制领域应用的研究人员和技术爱好者。 使用场景及目标：帮助读者掌握如何将DDPG、TD3和SAC应用于具体的机器人控制任务中，提高算法性能，解决实际问题。同时，也为进一步研究提供了宝贵的实践经验。 其他说明：文中不仅提供了详细的理论讲解，还附带了大量的代码片段，便于读者理解和实践。对于想要深入理解这些算法内部运作机制的人来说，是一份不可多得的学习资料。
基于QEM的优化网格简化算法C和C++实现源码（含论文）.zip
05-03
【资源说明】 1.项目代码功能经验证ok，确保稳定可靠运行。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通。 2.主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间，不仅可作为入门进阶，也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。 5.期待你能在项目中找到乐趣和灵感，也欢迎你的分享和反馈！ 本文介绍了基于QEM（Quadric Error Metrics，二次误差度量）的优化网格简化算法的C和C++实现源码及其相关文档。这一算法主要应用于计算机图形学领域，用于优化三维模型的多边形数量，使之在保持原有模型特征的前提下实现简化。简化的目的是为了提高渲染速度，减少计算资源消耗，以及便于网络传输等。 本项目的核心是网格简化算法的实现，而QEM作为该算法的核心，是一种衡量简化误差的数学方法。通过计算每个顶点的二次误差矩阵来评估简化操作的误差，并以此来指导网格简化过程。QEM算法因其高效性和准确性在计算机图形学中广泛应用，尤其在实时渲染和三维打印领域。 项目代码包含C和C++两种语言版本，这意味着它可以在多种开发环境中运行，增加了其适用范围。对于计算机相关专业的学生、教师和行业从业者来说，这个项目提供了丰富的学习和实践机会。无论是作为学习编程的入门材料，还是作为深入研究计算机图形学的项目，该项目都具有实用价值。 此外，项目包含的论文文档为理解网格简化算法提供了理论基础。论文详细介绍了QEM算法的原理、实施步骤以及与其他算法的对比分析。这不仅有助于加深对算法的理解，也为那些希望将算法应用于自己研究领域的人员提供了参考资料。 资源说明文档强调了项目的稳定性和可靠性，并鼓励用户在使用过程中提出问题或建议，以便不断地优化和完善项目。文档还提醒用户注意查看，以获取使用该项目的所有必要信息。 项目的文件名称列表中包含了加水印的论文文档、资源说明文件和实际的项目代码目录，后者位于名为Mesh-Simplification-master的目录下。用户可以将这些资源用于多种教学和研究目的，包括课程设计、毕业设计、项目立项演示等。 这个项目是一个宝贵的资源，它不仅提供了一个成熟的技术实现，而且为进一步的研究和学习提供了坚实的基础。它鼓励用户探索和扩展，以期在计算机图形学领域中取得更深入的研究成果。
IEEE 6 bus节点系统仿真：Matlab/Simulink质量保证的自主搭建模型，电压稳定且与标准参数一致的可观测电压
05-03
内容概要：本文详细介绍了如何使用Matlab/Simulink搭建IEEE 6节点电力系统仿真模型，确保电压稳定并与标准参数一致。主要内容涵盖节点与线路搭建、负载设置、电压稳定控制以及电压观测方法。文中强调了通过自动电压调节器(AVR)模块保持电压稳定，并通过电压测量模块实现电压观测。此外，还讨论了模型验证和优化技巧，如故障仿真、负荷模型设置和数据可视化。 适合人群：从事电力系统研究和技术开发的专业人士，尤其是有一定Matlab/Simulink基础的工程师和研究人员。 使用场景及目标：适用于电力系统仿真、电压稳定性分析、故障响应测试等应用场景。目标是帮助用户掌握电力系统建模的基本步骤和关键技术，提高仿真模型的可靠性和准确性。 其他说明：文中提供了详细的代码示例和配置指南，有助于读者快速理解和应用。同时，作者分享了许多实践经验，如参数设置、故障排除和性能优化，使模型更加贴近实际工程需求。
少儿编程scratch项目源代码文件案例素材-掉箱子.zip
05-03
少儿编程scratch项目源代码文件案例素材-掉箱子.zip
Apk包名信息提取（支持图标）
05-03
Apk包名信息提取（支持图标）
少儿编程scratch项目源代码文件案例素材-回放.zip
最新发布
05-03
少儿编程scratch项目源代码文件案例素材-回放.zip
基于改进粒子群算法的混合储能系统容量优化程序
05-03
内容概要：本文详细介绍了利用改进粒子群算法（PSO）进行混合储能系统（如电池与超级电容组合）容量优化的方法。文中首先指出了传统PSO易陷入局部最优的问题，并提出通过非线性衰减惯性权重、引入混沌因子和突变操作等方法来改进算法性能。随后，作者展示了具体的Python代码实现，包括粒子更新策略、适应度函数设计以及边界处理等方面的内容。适应度函数不仅考虑了设备的成本，还加入了对设备寿命和功率调节失败率的考量，确保优化结果的实际可行性。实验结果显示，在风光发电系统的应用场景中，改进后的PSO能够在较短时间内找到接近全局最优解的储能配置方案，相比传统方法降低了系统总成本并提高了循环寿命。 适合人群：从事电力系统、新能源技术研究的专业人士，尤其是对储能系统优化感兴趣的科研工作者和技术开发者。 使用场景及目标：适用于需要对混合储能系统进行容量优化的场合，旨在提高储能系统的经济效益和使用寿命，同时保证供电稳定性。通过学习本文提供的理论知识和代码实例，读者能够掌握改进粒子群算法的应用技巧，从而应用于实际工程项目中。 其他说明：文中提到的所有代码均为Python实现，且已在GitHub上提供完整的源代码链接（尽管文中给出的是虚拟地址）。此外，作者还计划将改进的PSO与其他优化算法相结合，进一步提升求解复杂问题的能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值