本文详细介绍了如何利用 jQuery 在动态生成的表单输入项中，实现商品价格与数量的实时计算与总计功能。通过监听数量输入框的变化事件，遍历所有商品项，计算每个商品的“单价 × 数量”，并累加得到订单总金额，确保即使在动态添加新商品行时，总价也能准确更新。
在构建如在线点餐系统这类需要动态添加商品行的web应用时，一个常见的需求是实时计算订单的总金额。这不仅涉及到获取单个商品的单价，更重要的是要将“单价”与用户输入的“数量”相乘，并对所有商品项的结果进行累加，最终显示在总计字段中。当商品行可以被动态添加时，传统的事件绑定方式可能失效，因此需要一套健壮的解决方案来确保所有动态生成的输入框都能参与到总价计算中。
核心问题：动态输入项的总价计算
在提供的场景中，每个商品行包含“商品名称”、“价格”和“数量”三个字段。其中，“价格”字段通常是根据选择的商品名称从后端获取并自动填充的，而“数量”字段则由用户手动输入。挑战在于：
实时性：当用户修改任何一个商品的数量时，总价需要立即更新。动态性：商品行可以被用户随时添加，新添加的行也必须自动参与到总价计算中。准确性：确保每个商品的“价格 × 数量”计算正确，并且所有商品项的乘积能够正确累加。
实现实时总价计算的 jQuery 方案
为了解决上述问题，我们可以利用 jQuery 的事件处理能力和DOM遍历功能。
1. HTML 结构与关键类名
为了方便 jQuery 选择器定位元素，确保每个商品行中的价格和数量输入框都具有相同的类名。例如，价格输入框使用 class=”price”，数量输入框使用 class=”quantity”。总计字段使用 id=”total”。
تفاصيل الطلب
2. JavaScript/jQuery 核心逻辑
核心思想是监听所有 .quantity 输入框的 change 事件。当任何一个数量发生变化时，遍历所有商品行，计算每个商品的“价格 × 数量”，然后累加到总计中。
// 定义一个函数来处理数量变化和总价计算function handleQuantityChange() { // 移除之前绑定的所有 'change' 事件处理器，然后重新绑定 // 这样做是为了确保当此函数被多次调用时（例如，添加新行后）， // 不会重复绑定事件，导致计算错误或性能问题。 $('.quantity').unbind('change').change(function() { let totalAmount = 0.0; // 初始化总金额 // 遍历所有具有 'price' 类的输入框 $('.price').each(function() { const price = parseFloat($(this).val()) || 0; // 获取价格，转换为浮点数，如果无效则为0 // 获取当前价格输入框对应的数量输入框的值 // DOM 遍历解释： // $(this) -> 当前的 .price input // .parent() -> (price input的父元素) // .parent() -> (包含价格label和input的父元素) // .next() -> (价格form-group的下一个兄弟元素，即包含数量的form-group) // .find('.quantity') -> 在这个数量的form-group中查找 class 为 .quantity 的元素 // .val() -> 获取数量的值 const quantity = parseFloat($(this).parent().parent().next().find('.quantity').val()) || 0; // 获取数量，转换为浮点数，如果无效则为0 totalAmount += price * quantity; // 累加每个商品的 (价格 * 数量) }); // 将计算出的总金额更新到 id 为 'total' 的输入框中 $('#total').val(totalAmount.toFixed(2)); // 保留两位小数 });}// 文档加载完成后，初始化事件处理器$(document).ready(function() { // 首次加载时调用，为页面上已存在的商品行绑定事件 handleQuantityChange(); // 假设您有一个按钮可以动态添加新的商品行，其ID为 'add' $('#add').click(function(e) { e.preventDefault(); var id = ++nextRowID; // 假设 nextRowID 用于生成唯一ID // ... (此处省略添加新商品行的HTML代码) ... // 在新行添加到DOM后，再次调用 handleQuantityChange() // 以确保新添加的行也能被正确绑定事件并参与总价计算。 handleQuantityChange(); // 绑定新添加的商品名称选择框的 change 事件，用于获取价格 $('#itemname' + id + '').change(function() { var code = $(this).val(); $.ajax({ type: 'POST', url: 'pages/GetPrice.php', data: { code: code }, success: function(data) { // 更新价格后，也需要触发总价计算 $('#price' + id + '').val(data); handleQuantityChange(); // 价格更新后重新计算总价 }, error: function(jqXHR, textStatus, errorThrown) { alert(errorThrown); } }); }); }); // 为初始的商品名称选择框绑定事件（如果页面加载时存在） $('#itemname').change(function() { var code = $(this).val(); $.ajax({ type: 'POST', url: 'pages/GetPrice.php', data: { code: code }, success: function(data) { $('#price').val(data); handleQuantityChange(); // 价格更新后重新计算总价 }, error: function(jqXHR, textStatus, errorThrown) { alert(errorThrown); } }); });});
3. 注意事项与优化
数值转换：使用 parseFloat() 将获取到的价格和数量字符串转换为浮点数进行计算，避免字符串拼接。使用 || 0 可以处理非数字输入或空值，将其视为0，避免 NaN 错误。
事件重新绑定：在 handleQuantityChange() 函数内部使用 $(‘.quantity’).unbind(‘change’).change(…) 的模式，是为了在每次动态添加新行后，重新初始化所有 .quantity 元素的 change 事件监听器。unbind(‘change’) 确保了旧的监听器被移除，避免重复触发。
触发时机：handleQuantityChange() 函数需要在以下时机被调用：
页面加载完成时 ($(document).ready)，以处理初始页面上的商品行。每次通过 AJAX 或其他方式动态添加新的商品行之后，确保新行也能被监听。当商品价格通过 AJAX 更新后，也应调用此函数，以确保总价反映最新的价格。
DOM 遍历的健壮性：$(this).parent().parent().next().find(‘.quantity’) 这种DOM遍历方式依赖于固定的HTML结构。如果HTML结构发生变化，这段代码可能需要调整。
事件委托 (Event Delegation)：对于动态生成的元素，更推荐使用事件委托。它将事件监听器绑定到父元素（例如 document 或某个固定的容器元素）上，利用事件冒泡来处理子元素的事件。这样即使子元素是动态添加的，也无需重复绑定事件。
// 使用事件委托的改进方案$(document).ready(function() { // 绑定到 document，监听所有 .quantity 元素的 change 事件 $(document).on('change', '.quantity', function() { calculateTotal(); // 任何数量变化时都调用计算函数 }); // 绑定到 document，监听所有 .itemname 元素的 change 事件 $(document).on('change', '.itemname', function() { // 假设 itemname 也有统一类名 const selectedItem = $(this); const code = selectedItem.val(); const priceInput = selectedItem.closest('.body').find('.price'); // 找到当前行对应的价格输入框 $.ajax({ type: 'POST', url: 'pages/GetPrice.php', data: { code: code }, success: function(data) { priceInput.val(data); calculateTotal(); // 价格更新后重新计算总价 }, error: function(jqXHR, textStatus, errorThrown) { alert(errorThrown); } }); }); // 独立的计算总价函数 function calculateTotal() { let totalAmount = 0.0; $('.price').each(function() { const price = parseFloat($(this).val()) || 0; // 注意：使用事件委托时，这里的DOM遍历方式不变 const quantity = parseFloat($(this).parent().parent().next().find('.quantity').val()) || 0; totalAmount += price * quantity; }); $('#total').val(totalAmount.toFixed(2)); } // 初始加载时调用一次计算 calculateTotal(); // 动态添加行时，无需额外绑定事件，因为事件委托已经处理 $('#add').click(function(e) { e.preventDefault(); var id = ++nextRowID; // ... (此处添加新商品行的HTML代码) ... // 新行添加后，立即重新计算总价，以防默认值影响总价 calculateTotal(); });});
这种事件委托的方案更加简洁高效，尤其适用于大量动态元素的场景。
总结
通过上述 jQuery 解决方案，我们能够有效地处理动态生成的表单输入项中的价格与数量计算问题。无论是采用事件的重复绑定与解绑（如原答案所示），还是更推荐的事件委托机制，核心都是在关键事件（如数量变化、价格更新、新行添加）发生时，遍历所有相关商品项，执行“单价 × 数量”的累加计算，并实时更新总计字段。这对于构建用户体验良好、功能完善的Web订单系统至关重要。
以上就是如何使用 jQuery 实现动态输入项的商品价格与数量总计的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1263977.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
关于作者
PHP中判断数字是否包含小数部分的方法探究
上一篇
2025年12月10日 08:05:38
使用 jQuery 实现动态输入项的价格与数量合计计算教程
下一篇
2025年12月10日 08:05:46
相关推荐
-
SASS 中的 Mixins
mixin 是 css 预处理器提供的工具，虽然它们不是可以被理解的函数，但它们的主要用途是重用代码。 不止一次，我们需要创建多个类来执行相同的操作，但更改单个值，例如字体大小的多个类。 .fs-10 { font-size: 10px;}.fs-20 { font-size: 20px;}.fs-…
-
React 或 Vite 是否会自动加载 CSS？
React 或 Vite 是否自动加载 CSS？ 在 React 中，如果未显式导入 CSS，而页面却出现了 CSS 效果，这可能是以下原因造成的： 你使用的第三方组件库，例如 AntD，包含了自己的 CSS 样式。这些组件库在使用时会自动加载其 CSS 样式，无需显式导入。在你的代码示例中，cla…
-
React 和 Vite 如何处理 CSS 加载？
React 或 Vite 是否会自动加载 CSS？ 在 React 中，默认情况下，使用 CSS 模块化时，不会自动加载 CSS 文件。需要手动导入或使用 CSS-in-JS 等技术才能应用样式。然而，如果使用了第三方组件库，例如 Ant Design，其中包含 CSS 样式，则这些样式可能会自动加…
-
ElementUI el-table 子节点选中后为什么没有打勾？
elementui el-table子节点选中后没有打勾？ 当您在elementui的el-table中选择子节点时，但没有出现打勾效果，可能是以下原因造成的： 在 element-ui 版本 2.15.7 中存在这个问题，升级到最新版本 2.15.13 即可解决。 除此之外，请确保您遵循了以下步骤…
-
您不需要 CSS 预处理器
原生 css 在最近几个月/几年里取得了长足的进步。在这篇文章中，我将回顾人们使用 sass、less 和 stylus 等 css 预处理器的主要原因，并向您展示如何使用原生 css 完成这些相同的事情。 分隔文件 分离文件是人们使用预处理器的主要原因之一。尽管您已经能够将另一个文件导入到 css…
-
CSS 中如何正确使用 box-shadow 设置透明度阴影？
css 中覆盖默认 box-shadow 样式时的报错问题 在尝试修改导航栏阴影时遇到报错，分析发现是 box-shadow 样式引起的问题。 问题原因 使用 !important 仍无法覆盖默认样式的原因在于，你使用了 rgb() 而不是 rgba()，这会导致语法错误。 立即学习“前端免费学习笔…
-
为何scss中嵌套使用/*rtl:ignore*/无法被postcss-rtl插件识别？
postcss-rtl插件为何不支持在scss中嵌套使用/*rtl:ignore*/ 在使用postcss-rtl插件时，如果希望对某个样式不进行转换，可以使用/*rtl:ignore*/在选择器前面进行声明。然而，当样式文件为scss格式时，该声明可能会失效，而写在css文件中则有效。 原因 po…
-
Sass 中使用 rgba(var –color) 时的透明度问题如何解决？
rgba(var –color)在 Sass 中无效的解决方法 在 Sass 中使用 rgba(var –color) 时遇到透明问题，可能是因为以下原因： 编译后的 CSS 代码 rgba($themeColor, 0.8) 在编译后会变为 rgba(var(–…
-
## PostCSS vs. Sass/Less/Stylus：如何选择合适的 CSS 代码编译工具？
PostCSS 与 Sass/Less/Stylus：CSS 代码编译转换中的异同 在 CSS 代码的编译转换领域，PostCSS 与 Sass/Less/Stylus 扮演着重要的角色，但它们的作用却存在细微差异。 区别 PostCSS 主要是一种 CSS 后处理器，它在 CSS 代码编译后进行处…
-
SCSS 简介：增强您的 CSS 工作流程
在 web 开发中，当项目变得越来越复杂时，编写 css 可能会变得重复且具有挑战性。这就是 scss (sassy css) 的用武之地，它是一个强大的 css 预处理器。scss 带来了变量、嵌套、混合等功能，使开发人员能够编写更干净、更易于维护的代码。在这篇文章中，我们将深入探讨 scss 是…
-
在 Sass 中使用 Mixin
如果您正在深入研究前端开发世界，那么您很可能遇到过sass（语法很棒的样式表）。 sass 是一个强大的 css 预处理器，它通过提供变量、嵌套、函数和 mixins 等功能来增强您的 css 工作流程。在这些功能中，mixins 作为游戏规则改变者脱颖而出，允许您有效地重用代码并保持样式表的一致性…
-
SCSS：创建模块化 CSS
介绍 近年来，css 预处理器的使用在 web 开发人员中显着增加。 scss (sassy css) 就是这样一种预处理器，它允许开发人员编写模块化且可维护的 css 代码。 scss 是 css 的扩展，添加了更多特性和功能，使其成为设计网站样式的强大工具。在本文中，我们将深入探讨使用 scss…
-
SCSS – 增强您的 CSS 工作流程
在本文中，我们将探索 scss (sassy css)，这是一个 css 预处理器，它通过允许变量、嵌套规则、mixins、函数等来扩展 css 的功能。 scss 使 css 的编写和维护变得更加容易，尤其是对于大型项目。 1.什么是scss？ scss 是 sass（syntropically …
-
如何正确使用 CSS：简洁高效样式的最佳实践
层叠样式表 (css) 是 web 开发中的一项基本技术，允许设计人员和开发人员创建具有视觉吸引力和响应灵敏的网站。然而，如果没有正确使用，css 很快就会变得笨拙且难以维护。在本文中，我们将探索有效使用 css 的最佳实践，确保您的样式表保持干净、高效和可扩展。 什么是css？ css（层叠样式表…
-
Html5如何监听蓝牙_Html5蓝牙监听实现方法【硬件交互】
需通过Web Bluetooth API实现蓝牙数据实时监听：一、用CharacteristicValueChanged事件监听支持Notify/Indicate的特征；二、轮询readValue()应对不支持通知的特征；三、监听GATT连接状态确保链路稳定；四、统一管理多特征订阅防内存泄漏。 如果…
-
html5怎么插入文档_HT5用object或iframe嵌入PDF/Word文档显示【插入】
可在HTML5中用iframe或object标签嵌入PDF，需设宽高及可访问路径；Word文档需借OneDrive等第三方服务代理渲染；须处理跨域限制并提供下载降级方案。 如果您希望在HTML5页面中嵌入PDF或Word文档并直接显示，可以使用或标签实现。以下是几种可行的嵌入方法： 一、使用ifra…
-
html如何只开发html页面_专注于开发纯HTML页面技术【技术】
纯HTML静态页面需禁用外部资源、内联CSS、JavaScript及非标准声明，仅用语义化标签和原生呈现标签，确保DOCTYPE、UTF-8编码与结构闭合性。 如果您希望构建一个仅包含HTML结构的静态页面，不引入CSS样式表或JavaScript脚本，则需严格遵循纯HTML语义化规范与内联限制原则…
-
html5怎么编写日历_html5用table或div布局加JS生成动态日历【编写】
可交互动态日历有四种HTML5实现方式：一、table+JS生成月视图；二、div+CSS Grid实现响应式布局；三、联动input[type=”date”]控件；四、用data-*属性与事件委托优化性能。 如果您希望使用 HTML5 技术构建一个可交互的动态日历，可通过纯…
-
html5怎样让搜索框支持拖拽排序_html5拖拽API与搜索框排序【技巧】
需利用HTML5 Drag and Drop API实现搜索框拖拽排序：一、设draggable=”true”并监听dragstart/dragover/drop事件；二、用DataTransfer传递JSON上下文；三、CSS定制拖拽反馈样式；四、隔离拖拽与输入焦点；五、检…
-
HTML如何转换为DAT格式_数据转换技巧解析【方案】
HTML转DAT可用四种方法：一、Python脚本解析提取后按分隔符写入；二、XSLT将良构HTML/XHTML映射为文本流；三、Excel中转粘贴表格后另存为制表符分隔文本并改扩展名；四、sed/awk流式剥离标签生成DAT。 如果您拥有HTML格式的网页数据，但需要将其转换为DAT格式以供特定程…
微信扫一扫 
支付宝扫一扫 
