jQuery动态计算总价教程

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《jQuery动态计算价格与数量合计教程》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

1. 理解动态订单系统的挑战

在构建如在线点餐系统这类应用时，用户可能需要动态添加多个商品项到订单中。每个商品项通常包含商品名称、单价和购买数量。核心挑战在于如何实时计算所有商品的总价，特别是当商品项可以动态增删时。传统的静态表单处理方式难以应对这种需求，需要借助前端技术（如 jQuery）来实现动态监听和计算。

2. 现有 HTML 与 PHP 结构分析

为了实现动态订单功能，我们需要一个清晰的 HTML 结构来表示每个商品项，以及后端 PHP 脚本来获取商品价格。

2.1 HTML 结构

每个商品项通常包含以下关键输入字段：

• 商品选择 (<select>): 用户选择具体的商品。
• 价格 (<input type="text" readonly>): 根据商品选择自动填充的单价，通常为只读。
• 数量 (<input type="number">): 用户输入购买的数量。

示例 HTML 结构如下：

    
    

        

            

                
تفاصيل الطلب
            
            
 
                

                    الصنف
                    

                        <select id="itemname" name="itemname[]" class="form-control">
                            اختر الصنف
                            
                        </select>
                    
                
                

                    السعر
                    

                        <input type="text" id="price" name="price[]" placeholder="-" readonly class="form-control price">
                    
                
                

                    الكمية
                    

                        <input class="form-control quantity" type="number" name="quantity[]" value="0" min="1">
                    
                
            
        
    
    
    <input type="text" id="total" placeholder="-" readonly class="form-control">

关键点：

• 每个商品行被包裹在一个具有特定类（如 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. 核心解决方案：实时合计计算

实现动态合计计算的关键在于：

1. 事件监听： 监听商品选择框和数量输入框的变化。
2. 动态添加行： 确保新添加的行也能被正确监听。
3. 遍历计算： 当任何相关输入变化时，遍历所有商品行，计算每个商品的总价，并累加到总订单价。

3.1 事件监听与委托

由于商品行是动态添加的，直接使用 .change() 绑定事件会漏掉新添加的元素。最佳实践是使用 事件委托。通过将事件监听器附加到文档（或一个静态的父元素）上，我们可以捕获来自动态元素的事件。

我们将监听两种变化：

• 商品选择变化： 当用户选择不同的商品时，需要通过 AJAX 获取新价格，并随后重新计算总价。
• 数量变化： 当用户修改商品数量时，需要立即重新计算总价。

3.2 遍历与计算逻辑

核心的计算逻辑封装在一个函数 calculateTotal() 中。该函数会：

1. 初始化一个总金额变量 totalSum 为 0。
2. 遍历页面上所有具有 body getval 类的 div 元素（每个代表一个商品行）。
3. 在每个商品行内部，找到对应的价格 (.price) 和数量 (.quantity) 输入框。
4. 将获取到的值转换为浮点数（parseFloat），进行价格与数量的乘法运算。
5. 将每个商品的总价累加到 totalSum 中。
6. 将最终的 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 代码中，包括动态添加行和事件委托。