本文详细介绍了如何利用 jQuery 在动态生成的表单输入字段中，实时计算商品价格与数量的总和。通过监听数量和价格输入框的变化事件，遍历所有商品项，获取其对应的价格和数量，并累加计算出订单总价，从而解决动态数据输入场景下的合计计算难题，提供了一套高效的前端解决方案。
1. 理解动态订单系统的挑战
在构建如在线点餐系统这类应用时，用户可能需要动态添加多个商品项到订单中。每个商品项通常包含商品名称、单价和购买数量。核心挑战在于如何实时计算所有商品的总价，特别是当商品项可以动态增删时。传统的静态表单处理方式难以应对这种需求，需要借助前端技术（如 jQuery）来实现动态监听和计算。
2. 现有 HTML 与 PHP 结构分析
为了实现动态订单功能，我们需要一个清晰的 HTML 结构来表示每个商品项，以及后端 PHP 脚本来获取商品价格。
2.1 HTML 结构
每个商品项通常包含以下关键输入字段：
商品选择 (): 用户选择具体的商品。价格 (): 根据商品选择自动填充的单价，通常为只读。数量 (): 用户输入购买的数量。
示例 HTML 结构如下：
تفاصيل الطلب
اختر الصنف
关键点：
每个商品行被包裹在一个具有特定类（如 body getval）的 div 中，这便于我们使用 jQuery 遍历每个商品项。价格输入框和数量输入框都带有公共类（price 和 quantity），这对于批量选择和操作至关重要。总价输入框 total 独立存在，用于显示计算结果。name=”itemname[]”, name=”price[]”, name=”quantity[]” 的数组命名方式，便于后端 PHP 接收多个商品项的数据。
2.2 PHP 后端获取价格
PHP 脚本负责根据选定的商品名称从数据库中获取对应的价格。
prepare("SELECT * FROM all_menu WHERE `item_name` = '".$id."'"); $get_c->execute(); while ($row = $get_c->fetch()) { $code .= $row['price']; } echo $code.'.00'; // 输出价格 }?>
此 PHP 脚本通过 AJAX 请求接收商品名称 (code)，查询数据库并返回对应的价格。
3. 核心解决方案：实时合计计算
实现动态合计计算的关键在于：
事件监听： 监听商品选择框和数量输入框的变化。动态添加行： 确保新添加的行也能被正确监听。遍历计算： 当任何相关输入变化时，遍历所有商品行，计算每个商品的总价，并累加到总订单价。
3.1 事件监听与委托
由于商品行是动态添加的，直接使用 .change() 绑定事件会漏掉新添加的元素。最佳实践是使用 事件委托。通过将事件监听器附加到文档（或一个静态的父元素）上，我们可以捕获来自动态元素的事件。
我们将监听两种变化：
商品选择变化： 当用户选择不同的商品时，需要通过 AJAX 获取新价格，并随后重新计算总价。数量变化： 当用户修改商品数量时，需要立即重新计算总价。
3.2 遍历与计算逻辑
核心的计算逻辑封装在一个函数 calculateTotal() 中。该函数会：
初始化一个总金额变量 totalSum 为 0。遍历页面上所有具有 body getval 类的 div 元素（每个代表一个商品行）。在每个商品行内部，找到对应的价格 (.price) 和数量 (.quantity) 输入框。将获取到的值转换为浮点数（parseFloat），进行价格与数量的乘法运算。将每个商品的总价累加到 totalSum 中。将最终的 totalSum 更新到总价输入框 (#total) 中。
function calculateTotal() { let totalSum = 0.0; // 遍历所有具有 'body getval' 类的商品行容器 $('.body.getval').each(function() { let $rowContainer = $(this); // 当前商品行容器 // 获取价格，如果为空或无效则默认为0 let price = parseFloat($rowContainer.find('.price').val() || 0); // 获取数量，如果为空或无效则默认为0 let quantity = parseFloat($rowContainer.find('.quantity').val() || 0); // 确保价格和数量都是有效的数字，然后进行乘法运算 if (!isNaN(price) && !isNaN(quantity)) { totalSum += price * quantity; } }); // 更新总价输入框，并格式化为两位小数 $('#total').val(totalSum.toFixed(2));}
3.3 整合后的 jQuery 代码示例
将上述逻辑整合到完整的 jQuery 代码中，包括动态添加行和事件委托。
$(document).ready(function(){ var nextRowID = 0; // 用于为新行生成唯一ID // 1. 事件委托：监听所有（包括动态添加的）商品选择框的变化 $(document).on('change', '[name="itemname[]"]', function(){ var $currentItemSelect = $(this); var code = $currentItemSelect.val(); // 找到当前行中的价格输入框 var $priceInput = $currentItemSelect.closest('.body.getval').find('.price'); // AJAX 请求获取商品价格 $.ajax({ type: 'POST', url: 'pages/GetPrice.php', // 你的PHP文件路径 data:{code:code}, success: function(data){ $priceInput.val(data); // 更新价格 calculateTotal(); // 价格更新后重新计算总价 }, error: function (jqXHR, textStatus, errorThrown){ alert("获取价格失败: " + errorThrown); } }); }); // 2. 事件委托：监听所有（包括动态添加的）数量输入框的变化 $(document).on('change', '.quantity', function(){ calculateTotal(); // 数量变化后重新计算总价 }); // 3. 核心计算函数：遍历所有商品行并计算总价 function calculateTotal() { let totalSum = 0.0; // 遍历所有具有 'body getval' 类的商品行容器 $('.body.getval').each(function() { let $rowContainer = $(this); // 当前商品行容器 // 获取价格，如果为空或无效则默认为0 let price = parseFloat($rowContainer.find('.price').val() || 0); // 获取数量，如果为空或无效则默认为0 let quantity = parseFloat($rowContainer.find('.quantity').val() || 0); // 确保价格和数量都是有效的数字，然后进行乘法运算 if (!isNaN(price) && !isNaN(quantity)) { totalSum += price * quantity; } }); // 更新总价输入框，并格式化为两位小数 $('#total').val(totalSum.toFixed(2)); } // 4. 动态添加新行功能 $('#add').click(function(e){ e.preventDefault(); var id = ++nextRowID; // 注意：这里生成的HTML片段应与初始HTML结构保持一致 // 并且ID需要是唯一的，例如 'itemname'+id，但更推荐通过类名和DOM遍历来定位元素 $('#append').append( '' + '' + '' + // 确保ID唯一 '' +
以上就是使用 jQuery 实现动态输入项的价格与数量合计计算教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1263979.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
关于作者
相关推荐
-
Golang JSON序列化：控制敏感字段暴露的最佳实践
本教程探讨golang中如何高效控制结构体字段在json序列化时的可见性。当需要将包含敏感信息的结构体数组转换为json响应时，通过利用`encoding/json`包提供的结构体标签，特别是`json:”-“`，可以轻松实现对特定字段的忽略，从而避免敏感数据泄露，确保api…
-
比特币新手教程 比特币交易平台有哪些
比特币是一种去中心化的数字货币，基于区块链技术实现点对点交易，具有匿名性、有限发行和不可篡改等特点；新手可通过交易所购买，P2P交易获得比特币，常用平台包括Binance、OKX和Huobi；交易流程包括注册账户、实名认证、绑定支付方式、充值法币并下单购买，可选择市价单或限价单；比特币存储方式有交易…
-
c++中的SFINAE技术是什么_c++模板编程中的SFINAE原理与应用
SFINAE 是“替换失败不是错误”的原则，指模板实例化时若参数替换导致错误，只要存在其他合法候选，编译器不报错而是继续重载决议。它用于条件启用模板、类型检测等场景，如通过 decltype 或 enable_if 控制函数重载，实现类型特征判断。尽管 C++20 引入 Concepts 简化了部分…
-
Go语言mgo查询构建：深入理解bson.M与日期范围查询的正确实践
本文旨在解决go语言mgo库中构建复杂查询时，特别是涉及嵌套`bson.m`和日期范围筛选的常见错误。我们将深入剖析`bson.m`的类型特性，解释为何直接索引`interface{}`会导致“invalid operation”错误，并提供一种推荐的、结构清晰的代码重构方案，以确保查询条件能够正确…
-
Golang goroutine与channel调试技巧
使用go run -race检测数据竞争，结合runtime.NumGoroutine监控协程数量，通过pprof分析阻塞调用栈，利用select超时避免永久阻塞，有效排查goroutine泄漏、死锁和数据竞争问题。 Go语言的goroutine和channel是并发编程的核心，但它们也带来了调试上…
-
《魔兽世界》将于6月11日开启国服回归技术测试
《%ign%ignore_a_1%re_a_1%》官方宣布，将于6月11日开启国服回归技术测试，时间为7天，并称可以在6月内正式开服，玩家们可以访问官网下载战网客户端并预下载“巫妖王之怒”客户端，技术测试详情见下图。 WordAi WordAI是一个AI驱动的内容重写平台 53 查看详情 以上就是《…
-
使用 Jupyter Notebook 进行探索性数据分析
Jupyter Notebook通过单元格实现代码与Markdown结合，支持数据导入（pandas）、清洗（fillna）、探索（matplotlib/seaborn可视化）、统计分析（describe/corr）和特征工程，便于记录与分享分析过程。 Jupyter Notebook 是进行探索性…
-
如何在HTML中插入表单元素_HTML表单控件与输入类型使用指南
HTML表单通过标签构建，包含action和method属性定义数据提交目标与方式，常用input类型如text、password、email等适配不同输入需求，配合label、required、placeholder提升可用性，结合textarea、select、button等控件实现完整交互，是…
-
创建指定大小并填充特定数据的Golang文件教程
本文将介绍如何使用Golang创建一个指定大小的文件，并用特定数据填充它。我们将使用 `os` 包提供的函数来创建和截断文件，从而实现快速生成大文件的目的。示例代码展示了如何创建一个10MB的文件，并将其填充为全零数据。掌握这些方法，可以方便地在例如日志系统或磁盘队列等场景中，预先创建测试文件或初始…
-
Python命令怎样使用profile分析脚本性能 Python命令性能分析的基础教程
使用Python的cProfile模块分析脚本性能最直接的方式是通过命令行执行python -m cProfile your_script.py，它会输出每个函数的调用次数、总耗时、累积耗时等关键指标，帮助定位性能瓶颈；为进一步分析，可将结果保存为文件python -m cProfile -o ou…
-
如何插入查询结果数据_SQL插入Select查询结果方法
使用INSERT INTO…SELECT语句可高效插入数据，通过NOT EXISTS、LEFT JOIN、MERGE语句或唯一约束避免重复；表结构不一致时可通过别名、类型转换、默认值或计算字段处理；结合存储过程可提升可维护性，支持参数化与动态SQL。 将查询结果数据插入到另一个表中，可以…
-
使用 WebCodecs VideoDecoder 实现精确逐帧回退
本文档旨在解决在使用 WebCodecs VideoDecoder 进行视频解码时，实现精确逐帧回退的问题。通过比较帧的时间戳与目标帧的时间戳，可以避免渲染中间帧，从而提高用户体验。本文将提供详细的解决方案和示例代码，帮助开发者实现精确的视频帧控制。 在使用 WebCodecs VideoDecod…
-
Discord.py 交互按钮超时与持久化解决方案
本教程旨在解决Discord.py中交互按钮在一段时间后出现“This Interaction Failed”错误的问题。我们将深入探讨视图（View）的超时机制，并提供通过正确设置timeout参数以及利用bot.add_view()方法实现按钮持久化的具体方案，确保您的机器人交互功能稳定可靠，即…
-
Debian Copilot的社区活跃度如何
debian copilot是codeberg社区维护的ai助手，旨在为debian用户提供服务。尽管搜索结果中没有直接提供关于debian copilot社区支持活跃度的具体数据，但我们可以通过debian社区的整体活跃度和特点来推断其活跃性。 Debian社区的一般情况： Debian拥有详尽的…
-
JavaScript 动态菜单点击高亮效果实现教程
本教程详细介绍了如何使用 JavaScript 实现动态菜单的点击高亮功能。通过事件委托和状态管理，当用户点击菜单项时，被点击项会高亮显示（绿色），同时其他菜单项恢复默认样式（白色）。这种方法避免了不必要的DOM操作，提高了性能和代码可维护性，确保了无论点击方向如何，功能都能稳定运行。 动态菜单高亮…
-
c++如何实现UDP通信_c++基于UDP的网络通信示例
UDP通信基于套接字实现，适用于实时性要求高的场景。1. 流程包括创建套接字、绑定地址（接收方）、发送（sendto）与接收（recvfrom）数据、关闭套接字；2. 服务端监听指定端口，接收客户端消息并回传；3. 客户端发送消息至服务端并接收响应；4. 跨平台需处理Winsock初始化与库链接，编…
-
JavaScript函数中插入加载动画（Spinner）的正确方法
本文旨在解决在JavaScript函数中插入加载动画（Spinner）时遇到的异步问题。通过引入async/await和Promise.all，确保在数据处理完成前后正确显示和隐藏加载动画，提升用户体验。我们将提供两种实现方案，并详细解释其原理和优势。 在Web开发中，当执行耗时操作时，显示加载动画…
-
使用 Pydantic v2 实现条件性必填字段
本文介绍了如何在 Pydantic v2 模型中实现条件性必填字段。通过自定义验证器，可以根据模型中其他字段的值来动态地控制某些字段是否为必填项，从而满足 API 交互中数据验证的复杂需求。本文提供了一个具体的示例，展示了如何确保模型中至少有一个字段被赋值。 在 Pydantic v2 中，虽然没有…
-
三星不再独享，消息称搭载骁龙 8 Gen 3 领先版处理器新机即将发布
6 月 15 日消息，据博主@肥威 今日爆料，搭载骁龙 8 Gen 3 领先版%ign%ignore_a_1%re_a_1%的新机即将发布，把之前的 for Galaxy 改成“for Everybody”。 Pic Copilot AI时代的顶级电商设计师，轻松打造爆款产品图片 158 查看详情 …
-
动态更新圆形进度条：JavaScript成绩计算器集成指南
本文档旨在指导开发者如何将JavaScript成绩计算系统与动态圆形进度条集成，实现可视化展示平均成绩。我们将详细讲解如何修改现有的JavaScript代码，使其在计算出平均分后，能够动态更新圆形进度条的进度，从而提供更直观的用户体验。本文档包含详细的代码示例和注意事项，帮助开发者轻松实现这一功能。…
微信扫一扫 
支付宝扫一扫 
