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 代码中，包括动态添加行和事件委托。
