求用于Infusionsoft订单表单的jQuery/代码：动态更新总价

核心思路 #

监听数量输入框的变化事件，实时计算两个产品数量对应的总价并更新页面显示区域。以下是适配Infusionsoft表单结构的两种实现方案：

前提准备 #

先确认表单元素的关键信息：

• 两个数量输入框的选择器（类名/ID，比如Infusionsoft默认常用inf-field-qty类）
• 每个产品的单价（可存在输入框的data-price属性，或从页面价格元素提取）
• 总价显示元素的选择器（比如ID为inf-total-price的元素）

方案1：原生JavaScript实现（无依赖） #

// 等待页面完全渲染，确保Infusionsoft表单已加载
document.addEventListener('DOMContentLoaded', function() {
    // 替换为你实际的数量输入框选择器
    const quantityInputs = document.querySelectorAll('.inf-field-qty');
    // 替换为你实际的总价显示元素选择器
    const totalElement = document.getElementById('inf-total-price');

    // 计算总价的核心函数
    function calculateTotal() {
        let total = 0;
        quantityInputs.forEach(input => {
            const quantity = parseInt(input.value) || 0;
            // 从data-price属性取单价，若单价来自其他元素可修改此处逻辑
            const price = parseFloat(input.dataset.price) || 0;
            total += quantity * price;
        });
        // 格式化总价为货币格式（可按需调整）
        totalElement.textContent = `$${total.toFixed(2)}`;
    }

    // 给每个输入框绑定监听事件
    quantityInputs.forEach(input => {
        input.addEventListener('input', calculateTotal);
        input.addEventListener('change', calculateTotal);
    });

    // 页面加载时初始化计算一次总价
    calculateTotal();
});

方案2：jQuery实现（适配Infusionsoft内置环境） #

若页面已加载jQuery（Infusionsoft通常默认加载），可使用更简洁的事件委托写法：

$(document).ready(function() {
    // 事件委托处理动态加载的表单元素，避免异步渲染导致绑定失效
    $(document).on('input change', '.inf-field-qty', function() {
        let total = 0;
        $('.inf-field-qty').each(function() {
            const quantity = parseInt($(this).val()) || 0;
            const price = parseFloat($(this).data('price')) || 0;
            total += quantity * price;
        });
        $('#inf-total-price').text(`$${total.toFixed(2)}`);
    });

    // 初始化触发一次计算
    $('.inf-field-qty').trigger('input');
});

适配说明 #

1. 选择器替换：将代码中的.inf-field-qty和#inf-total-price替换为你表单中实际的元素类名/ID，可通过浏览器F12开发者工具查看元素属性获取。
2. 单价来源调整：若单价不是存在data-price属性，而是从产品价格标签（比如<span class="inf-product-price">99.99</span>）读取，可修改单价获取逻辑：

   // 示例：从相邻的产品价格元素提取单价
   const price = parseFloat(input.closest('.inf-product-item').querySelector('.inf-product-price').textContent) || 0;
   

3. 格式自定义：可按需调整总价的显示格式，比如去掉$符号、修改小数位数等。

内容的提问来源于stack exchange，提问作者abdul