当前位置：首页 > 文章列表 > 文章 > php教程 > jQuery动态价格计算教程详解

jQuery动态价格计算教程详解

2025-07-16 16:06:27 0浏览收藏

本jQuery教程旨在帮助开发者掌握如何利用jQuery实现Web应用中动态表单的实时计算功能，尤其是在处理商品选择、价格和数量等动态变化时，实现总价的自动更新。文章深入讲解了HTML结构设计、PHP后端数据交互（提供示例）以及jQuery事件委托机制的关键应用，确保即使是动态添加的表单元素也能实时响应用户的操作。核心在于通过事件委托监听父元素，利用事件冒泡捕获子元素的事件，并遍历商品行计算总价，提供一套健壮且易于扩展的解决方案，适用于构建订单、购物车等复杂Web应用，提升用户体验。掌握这些技巧，轻松应对动态表单中的实时计算挑战。

动态输入场景下基于 jQuery 的实时价格与数量计算教程

本教程详细阐述了如何在Web应用中，利用jQuery处理动态生成的表单输入（如商品选择、价格、数量），实现实时的总价计算。内容涵盖HTML结构设计、后端数据获取（PHP示例）、jQuery事件委托机制的应用，以及遍历动态元素进行精确计算的方法，旨在提供一套健壮且可扩展的解决方案。

挑战：动态表单中的实时计算

在构建订单或购物车等Web应用时，常见需求是用户可以动态添加多个商品项。每个商品项包含商品名称、单价和购买数量。核心挑战在于，当用户选择商品（获取单价）或修改数量时，系统需要实时计算并更新总价。由于商品项是动态添加的，传统的直接事件绑定方式可能无法覆盖新生成的元素。

核心概念：事件委托与遍历计算

为解决动态元素事件绑定问题，我们将采用 事件委托（Event Delegation） 机制。事件委托允许我们将事件监听器绑定到一个父元素上，然后利用事件冒泡的原理，捕获其子元素（包括未来动态添加的子元素）上发生的事件。这比每次添加新元素都重新绑定事件更高效、更简洁。

总价的计算则通过遍历所有商品行的价格和数量输入框，将每行的“单价 × 数量”累加起来实现。

HTML 结构解析

为了方便 jQuery 操作，我们需要一个清晰的 HTML 结构。每个商品项应包含选择商品、显示价格和输入数量的元素。以下是关键部分的简化结构：

<!-- 初始商品项，或作为动态添加的模板 -->
<div class="item-details-box">
    <div class="form-group">
        <label class="control-label">商品</label>
        <div class="col-lg-10">
            <!-- 为商品选择框添加类名，便于事件委托 -->
            <select class="form-control item-name" name="itemname[]">
                <option disabled selected>选择商品</option>
                <?php echo getValues($pdo); // PHP函数用于填充商品选项 ?>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">价格</label>
        <div class="col-lg-10">
            <!-- 为价格输入框添加类名，并设置为只读 -->
            <input type="text" class="form-control price" name="price[]" placeholder="-" readonly>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">数量</label>
        <div class="col-lg-10">
            <!-- 为数量输入框添加类名 -->
            <input class="form-control quantity" type="number" name="quantity[]" value="0" min="1">
        </div>
    </div>
</div>

<!-- 动态添加商品项的容器 -->
<div id="append-area"></div>

<!-- 添加商品按钮 -->
<button id="add-item">添加商品</button>

<!-- 总价显示框 -->
<input type="text" id="total" placeholder="-" readonly class="form-control">

说明：

item-details-box 类：可以作为每个商品项的父容器，方便定位内部元素。
item-name 类：用于商品选择框，触发价格获取。
price 类：用于价格显示框。
quantity 类：用于数量输入框，触发总价计算。
name="itemname[]"、name="price[]"、name="quantity[]"：使用数组命名方式，方便后端接收多个商品数据。

PHP 后端服务（获取商品价格）

后端 PHP 脚本负责根据前端传入的商品名称（或ID）从数据库中查询对应的价格。

<?php    
    require 'DBConnection.php'; // 数据库连接文件
    $price = '';
    if(isset($_POST["code"])){ // 'code' 通常指商品ID或名称
        $id = $_POST["code"];
        // 预处理SQL语句，防止SQL注入
        $get_price_stmt = $pdo->prepare("SELECT price FROM all_menu WHERE `item_name` = :item_name");
        $get_price_stmt->bindParam(':item_name', $id);
        $get_price_stmt->execute(); 

        $row = $get_price_stmt->fetch(PDO::FETCH_ASSOC);
        if ($row) {
            $price = $row['price'];
        }
        echo number_format((float)$price, 2, '.', ''); // 格式化输出价格，确保为浮点数
    }
?>

说明：

使用 PDO 预处理语句是最佳实践，可有效防止 SQL 注入。
number_format 函数用于格式化价格输出，确保其为数值类型且有固定的小数位数。

jQuery 实现详解

我们将使用 jQuery 来实现前端的交互逻辑。

1. 核心函数：计算总价

定义一个可复用的函数 calculateTotal()，它将遍历所有商品项，累加计算总价。

/**
 * 计算所有商品项的总价并更新显示
 */
function calculateTotal() {
    let totalSum = 0.0;
    // 遍历所有具有 'item-details-box' 类的商品项
    $('.item-details-box').each(function() {
        const $currentRow = $(this); // 当前商品项的jQuery对象
        // 获取价格和数量，并转换为浮点数，如果为空则默认为0
        const price = parseFloat($currentRow.find('.price').val()) || 0;
        const quantity = parseFloat($currentRow.find('.quantity').val()) || 0;

        totalSum += price * quantity;
    });
    // 更新总价显示，保留两位小数
    $('#total').val(totalSum.toFixed(2));
}

2. 事件绑定：获取商品价格与实时计算

使用事件委托，为商品选择框和数量输入框绑定事件。

$(document).ready(function() {
    // 使用事件委托，监听所有 '.item-name' 元素的 'change' 事件
    // 无论是初始存在的还是动态添加的元素，都会被捕获
    $(document).on('change', '.item-name', function() {
        const $currentRow = $(this).closest('.item-details-box'); // 获取当前商品项的父容器
        const itemCode = $(this).val(); // 获取选中的商品值

        if (itemCode) {
            $.ajax({
                type: 'POST',
                url: 'pages/GetPrice.php', // PHP后端服务地址
                data: { code: itemCode },
                success: function(data) {
                    // 更新当前商品项的价格字段
                    $currentRow.find('.price').val(parseFloat(data).toFixed(2));
                    calculateTotal(); // 价格更新后，重新计算总价
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("Error fetching price:", errorThrown);
                    alert("获取价格失败: " + errorThrown);
                }
            });
        } else {
            // 如果未选择商品，清空价格并重新计算总价
            $currentRow.find('.price').val('');
            calculateTotal();
        }
    });

    // 使用事件委托，监听所有 '.quantity' 元素的 'input' 事件
    // 'input' 事件在值改变时立即触发，提供更好的实时体验
    $(document).on('input', '.quantity', function() {
        calculateTotal(); // 数量改变时，立即计算总价
    });

    // 页面加载时，执行一次总价计算（如果页面上已有商品）
    calculateTotal();
});

3. 动态添加商品行

为“添加商品”按钮绑定点击事件，每次点击时生成新的商品项 HTML 并追加到指定容器。

$(document).ready(function() {
    // ... (上面的事件绑定代码) ...

    let nextRowID = 0; // 用于区分动态生成的元素，虽然有了类名，但有时仍需唯一ID
    $('#add-item').click(function(e) {
        e.preventDefault(); // 阻止按钮默认行为
        nextRowID++; // 递增ID

        // 构建新的商品项HTML字符串
        // 注意：这里的PHP代码 `getValues($pdo)` 需要确保在前端渲染时可用，
        // 或者通过AJAX动态获取商品列表填充select
        const newRowHtml = `
            <div class="item-details-box">
                <div class="form-group">
                    <label class="control-label">商品</label>
                    <div class="col-lg-10">
                        <select class="form-control item-name" name="itemname[]" id="itemname${nextRowID}">
                            <option disabled selected>选择商品</option>
                            <?php echo getValues($pdo); ?>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">价格</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control price" name="price[]" id="price${nextRowID}" placeholder="-" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">数量</label>
                    <div class="col-lg-10">
                        <input class="form-control quantity" type="number" name="quantity[]" id="quantity${nextRowID}" value="0" min="1">
                    </div>
                </div>
            </div>
        `;
        // 将新行追加到容器中
        $('#append-area').append(newRowHtml);

        // 动态添加后，如果需要立即触发某些逻辑，可以在这里调用
        // 例如：如果新添加的行有默认值，可能需要重新计算总价
        calculateTotal();
    });
});

完整代码示例

将上述 HTML、PHP（示意）和 jQuery 代码整合，构成一个可运行的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态商品价格与数量计算</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <style>
        /* 样式仅为示例，可根据项目需要调整 */
        body { font-family: Arial, sans-serif; margin: 20px; }
        .item-details-box { border: 1px solid #ccc; padding: 15px; margin-bottom: 15px; border-radius: 5px; }
        .form-group { margin-bottom: 10px; display: flex; align-items: center; }
        .form-group label { flex: 0 0 80px; text-align: right; margin-right: 10px; }
        .form-group .col-lg-10 { flex: 1; }
        .form-control { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
        #total { font-weight: bold; font-size: 1.2em; margin-top: 20px; }
        #add-item { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
        #add-item:hover { background-color: #0056b3; }
    </style>
</head>
<body>

    <h1>订单详情</h1>

    <!-- 初始商品项 -->
    <div class="item-details-box">
        <div class="form-group">
            <label class="control-label">商品</label>
            <div class="col-lg-10">
                <select class="form-control item-name" name="itemname[]">
                    <option disabled selected value="">选择商品</option>
                    <?php 
                        // 假设 getValues($pdo) 返回类似以下HTML字符串
                        // <option value="ItemA">商品A</option><option value="ItemB">商品B</option>
                        // 在实际应用中，这里应连接数据库获取
                        echo '<option value="ItemA">商品A</option>';
                        echo '<option value="ItemB">商品B</option>';
                        echo '<option value="ItemC">商品C</option>';
                    ?>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">价格</label>
            <div class="col-lg-10">
                <input type="text" class="form-control price" name="price[]" placeholder="-" readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">数量</label>
            <div class="col-lg-10">
                <input class="form-control quantity" type="number" name="quantity[]" value="0" min="1">
            </div>
        </div>
    </div>

    <!-- 动态添加商品项的容器 -->
    <div id="append-area"></div>

    <!-- 添加商品按钮 -->
    <button id="add-item">添加商品</button>

    <div class="form-group" style="margin-top: 20px;">
        <label class="control-label">总价</label>
        <div class="col-lg-10">
            <input type="text" id="total" placeholder="-" readonly class="form-control">
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 模拟PHP getValues函数，实际应从后端获取
            function getValuesMock() {
                return '<option value="ItemA">商品A</option>' +
                       '<option value="ItemB">商品B</option>' +
                       '<option value="ItemC">商品C</option>';
            }

            // 模拟GetPrice.php后端响应
            function getPriceMock(itemCode) {
                const prices = {
                    'ItemA': 10.50,
                    'ItemB': 25.00,
                    'ItemC': 5.75
                };
                return prices[itemCode] ? prices[itemCode].toFixed(2) : '0.00';
            }

            /**
             * 计算所有商品项的总价并更新显示
             */
            function calculateTotal() {
                let totalSum = 0.0;
                $('.item-details-box').each(function() {
                    const $currentRow = $(this);
                    const price = parseFloat($currentRow.find('.price').val()) || 0;
                    const quantity = parseFloat($currentRow.find('.quantity').val()) || 0;

                    totalSum += price * quantity;
                });
                $('#total').val(totalSum.toFixed(2));
            }

            // 1. 事件委托：处理商品选择和数量变化
            $(document).on('change', '.item-name', function() {
                const $currentRow = $(this).closest('.item-details-box');
                const itemCode = $(this).val();

                if (itemCode) {
                    // 实际应用中这里是 $.ajax 调用 GetPrice.php
                    // $.ajax({
                    //     type: 'POST',
                    //     url: 'pages/GetPrice.php

今天关于《jQuery动态价格计算教程详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！