如何使用 jQuery 实现动态输入项的商品价格与数量总计

<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">
                <!-- 商品名称选择框，此处省略PHP代码 -->
                <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>
    <!-- 动态添加的行也会遵循此结构 -->
</div>
<input type="text" id="total" placeholder="-" readonly class="form-control">

// 定义一个函数来处理数量变化和总价计算
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()               -> <div class="col-lg-10"> (price input的父元素)
            // .parent()               -> <div class="form-group"> (包含价格label和input的父元素)
            // .next()                 -> <div class="form-group"> (价格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);
            }
        });
    });
});