jQuery动态计算总价教程

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

本文详细介绍了如何利用 jQuery 在动态生成的表单输入字段中，实时计算商品价格与数量的总和。通过监听数量和价格输入框的变化事件，遍历所有商品项，获取其对应的价格和数量，并累加计算出订单总价，从而解决动态数据输入场景下的合计计算难题，提供了一套高效的前端解决方案。

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

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

2. 现有 HTML 与 PHP 结构分析

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

2.1 HTML 结构

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

• 商品选择 (): 用户选择具体的商品。
  价格 (
  ): 根据商品选择自动填充的单价，通常为只读。
• 数量 (): 用户输入购买的数量。

示例 HTML 结构如下：

<div class="form-group">
    <label class="control-label col-lg-4"></label>
    <div id="diva" class="col-lg-4">
        <div class="box">
            <header>
                <h5>تفاصيل الطلب</h5>
            </header>
            <div class="body getval"> <!-- 关键：用于标识一个商品行 -->
                <div class="form-group">
                    <label class="control-label col-lg-2">الصنف</label>
                    <div class="col-lg-10">
                        <select id="itemname" name="itemname[]" class="form-control">
                            <option disabled selected>اختر الصنف</option>
                            <?php echo getValues($pdo); ?>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2">السعر</label>
                    <div class="col-lg-10">
                        <input type="text" id="price" name="price[]" placeholder="-" readonly class="form-control price">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2">الكمية</label>
                    <div class="col-lg-10">
                        <input class="form-control quantity" type="number" name="quantity[]" value="0" min="1">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 总价显示字段，位于所有商品行之外 -->
    <input type="text" id="total" placeholder="-" readonly class="form-control">
</div>

关键点：

• 每个商品行被包裹在一个具有特定类（如 body getval）的 div 中，这便于我们使用 jQuery 遍历每个商品项。
• 价格输入框和数量输入框都带有公共类（price 和 quantity），这对于批量选择和操作至关重要。
• 总价输入框 total 独立存在，用于显示计算结果。
• name="itemname[]", name="price[]", name="quantity[]" 的数组命名方式，便于后端 PHP 接收多个商品项的数据。

2.2 PHP 后端获取价格

PHP 脚本负责根据选定的商品名称从数据库中获取对应的价格。

<?php    
    require 'DBConnection.php'; // 数据库连接
    $code='';
    if(isset($_POST["code"])){
        $id = $_POST["code"];
        $get_c = $pdo->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 代码中，包括动态添加行和事件委托。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<script>
$(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(
            '<div class="form-group">' +
                '<label class="control-label col-lg-4"></label>' +
                '<div id ="diva'+id+'" class="col-lg-4">' + // 确保ID唯一
                    '<div class="box">' +

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。