投稿获客
  1. 创想鸟首页
  2. 用户投稿

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

程序猿 • • 用户投稿 • 阅读 0

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

本文详细介绍了如何利用 jQuery 在动态生成的表单输入项中，实现商品价格与数量的实时计算与总计功能。通过监听数量输入框的变化事件，遍历所有商品项，计算每个商品的“单价 × 数量”，并累加得到订单总金额，确保即使在动态添加新商品行时，总价也能准确更新。

在构建如在线点餐系统这类需要动态添加商品行的web应用时，一个常见的需求是实时计算订单的总金额。这不仅涉及到获取单个商品的单价，更重要的是要将“单价”与用户输入的“数量”相乘，并对所有商品项的结果进行累加，最终显示在总计字段中。当商品行可以被动态添加时，传统的事件绑定方式可能失效，因此需要一套健壮的解决方案来确保所有动态生成的输入框都能参与到总价计算中。

核心问题：动态输入项的总价计算

在提供的场景中，每个商品行包含“商品名称”、“价格”和“数量”三个字段。其中，“价格”字段通常是根据选择的商品名称从后端获取并自动填充的，而“数量”字段则由用户手动输入。挑战在于：

实时性：当用户修改任何一个商品的数量时，总价需要立即更新。动态性：商品行可以被用户随时添加，新添加的行也必须自动参与到总价计算中。准确性：确保每个商品的“价格 × 数量”计算正确，并且所有商品项的乘积能够正确累加。

实现实时总价计算的 jQuery 方案

为了解决上述问题，我们可以利用 jQuery 的事件处理能力和DOM遍历功能。

1. HTML 结构与关键类名

为了方便 jQuery 选择器定位元素，确保每个商品行中的价格和数量输入框都具有相同的类名。例如，价格输入框使用 class=”price”，数量输入框使用 class=”quantity”。总计字段使用 id=”total”。

        
        
            
                
تفاصيل الطلب

2. JavaScript/jQuery 核心逻辑

核心思想是监听所有 .quantity 输入框的 change 事件。当任何一个数量发生变化时，遍历所有商品行，计算每个商品的“价格 × 数量”，然后累加到总计中。

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

3. 注意事项与优化

数值转换：使用 parseFloat() 将获取到的价格和数量字符串转换为浮点数进行计算，避免字符串拼接。使用 || 0 可以处理非数字输入或空值，将其视为0，避免 NaN 错误。

事件重新绑定：在 handleQuantityChange() 函数内部使用 $(‘.quantity’).unbind(‘change’).change(…) 的模式，是为了在每次动态添加新行后，重新初始化所有 .quantity 元素的 change 事件监听器。unbind(‘change’) 确保了旧的监听器被移除，避免重复触发。

触发时机：handleQuantityChange() 函数需要在以下时机被调用：

页面加载完成时 ($(document).ready)，以处理初始页面上的商品行。每次通过 AJAX 或其他方式动态添加新的商品行之后，确保新行也能被监听。当商品价格通过 AJAX 更新后，也应调用此函数，以确保总价反映最新的价格。

DOM 遍历的健壮性：$(this).parent().parent().next().find(‘.quantity’) 这种DOM遍历方式依赖于固定的HTML结构。如果HTML结构发生变化，这段代码可能需要调整。

事件委托 (Event Delegation)：对于动态生成的元素，更推荐使用事件委托。它将事件监听器绑定到父元素（例如 document 或某个固定的容器元素）上，利用事件冒泡来处理子元素的事件。这样即使子元素是动态添加的，也无需重复绑定事件。

// 使用事件委托的改进方案$(document).ready(function() {    // 绑定到 document，监听所有 .quantity 元素的 change 事件    $(document).on('change', '.quantity', function() {        calculateTotal(); // 任何数量变化时都调用计算函数    });    // 绑定到 document，监听所有 .itemname 元素的 change 事件    $(document).on('change', '.itemname', function() { // 假设 itemname 也有统一类名        const selectedItem = $(this);        const code = selectedItem.val();        const priceInput = selectedItem.closest('.body').find('.price'); // 找到当前行对应的价格输入框        $.ajax({            type: 'POST',            url: 'pages/GetPrice.php',            data: {                code: code            },            success: function(data) {                priceInput.val(data);                calculateTotal(); // 价格更新后重新计算总价            },            error: function(jqXHR, textStatus, errorThrown) {                alert(errorThrown);            }        });    });    // 独立的计算总价函数    function calculateTotal() {        let totalAmount = 0.0;        $('.price').each(function() {            const price = parseFloat($(this).val()) || 0;            // 注意：使用事件委托时，这里的DOM遍历方式不变            const quantity = parseFloat($(this).parent().parent().next().find('.quantity').val()) || 0;            totalAmount += price * quantity;        });        $('#total').val(totalAmount.toFixed(2));    }    // 初始加载时调用一次计算    calculateTotal();    // 动态添加行时，无需额外绑定事件，因为事件委托已经处理    $('#add').click(function(e) {        e.preventDefault();        var id = ++nextRowID;        // ... (此处添加新商品行的HTML代码) ...        // 新行添加后，立即重新计算总价，以防默认值影响总价        calculateTotal();    });});

这种事件委托的方案更加简洁高效，尤其适用于大量动态元素的场景。

总结

通过上述 jQuery 解决方案，我们能够有效地处理动态生成的表单输入项中的价格与数量计算问题。无论是采用事件的重复绑定与解绑（如原答案所示），还是更推荐的事件委托机制，核心都是在关键事件（如数量变化、价格更新、新行添加）发生时，遍历所有相关商品项，执行“单价 × 数量”的累加计算，并实时更新总计字段。这对于构建用户体验良好、功能完善的Web订单系统至关重要。

以上就是如何使用 jQuery 实现动态输入项的商品价格与数量总计的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1263977.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

414.1K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
PHP中判断数字是否包含小数部分的方法探究
上一篇 2025年12月10日 08:05:38
使用 jQuery 实现动态输入项的价格与数量合计计算教程
下一篇 2025年12月10日 08:05:46

相关推荐

  • 如何让动态追加元素的类事件生效？ 用户投稿

    如何让动态追加元素的类事件生效？

    如何在追加元素后使其绑定类事件生效 在页面中引入三方 JavaScript 类并通过添加相应 class 来调用事件方法是一种常见的做法。然而，如果通过 JavaScript 追加标签元素，即使添加了对应的 class，事件也可能无法生效。 为了解决这个问题，可以尝试以下步骤： 检查追加的标签是否为…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • RichHandler与Rich Progress集成：解决显示冲突的教程 用户投稿

    RichHandler与Rich Progress集成：解决显示冲突的教程

    在使用rich库的`richhandler`进行日志输出并同时使用`progress`组件时，可能会遇到显示错乱或溢出问题。这通常是由于为`richhandler`和`progress`分别创建了独立的`console`实例导致的。解决方案是确保日志处理器和进度条组件共享同一个`console`实例…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • HTML5网页如何实现手势操作 HTML5网页移动端交互的处理技巧 用户投稿

    HTML5网页如何实现手势操作 HTML5网页移动端交互的处理技巧

    首先利用原生touch事件实现滑动判断，再通过preventDefault解决滚动冲突，接着引入Hammer.js处理复杂手势，最后通过优化点击区域、避免事件冲突和增加视觉反馈提升体验。 在移动端浏览器中，HTML5网页可以通过触摸事件实现手势操作，提升用户体验。虽然原生JavaScript提供了基…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • JavaScript 动态菜单点击高亮效果实现教程 用户投稿

    JavaScript 动态菜单点击高亮效果实现教程

    本教程详细介绍了如何使用 JavaScript 实现动态菜单的点击高亮功能。通过事件委托和状态管理，当用户点击菜单项时，被点击项会高亮显示（绿色），同时其他菜单项恢复默认样式（白色）。这种方法避免了不必要的DOM操作，提高了性能和代码可维护性，确保了无论点击方向如何，功能都能稳定运行。 动态菜单高亮…

    程序猿的头像 程序猿
    2026年5月10日
    200

  • 三星不再独享，消息称搭载骁龙 8 Gen 3 领先版处理器新机即将发布

    三星不再独享，消息称搭载骁龙 8 Gen 3 领先版处理器新机即将发布三星不再独享，消息称搭载骁龙 8 Gen 3 领先版处理器新机即将发布三星不再独享，消息称搭载骁龙 8 Gen 3 领先版处理器新机即将发布三星不再独享，消息称搭载骁龙 8 Gen 3 领先版处理器新机即将发布

    6 月 15 日消息，据博主@肥威 今日爆料，搭载骁龙 8 Gen 3 领先版%ign%ignore_a_1%re_a_1%的新机即将发布，把之前的 for Galaxy 改成“for Everybody”。 Pic Copilot AI时代的顶级电商设计师，轻松打造爆款产品图片 158 查看详情 …

    程序猿的头像 程序猿
    2026年5月10日 • 用户投稿
    100

  • 高通预热 2023 骁龙峰会：以AI为主题，10 月 25-26 日举行

    高通预热 2023 骁龙峰会：以AI为主题，10 月 25-26 日举行高通预热 2023 骁龙峰会：以AI为主题，10 月 25-26 日举行高通预热 2023 骁龙峰会：以AI为主题，10 月 25-26 日举行高通预热 2023 骁龙峰会：以AI为主题，10 月 25-26 日举行

    【环球网科技综合报道】10月17日消息，高通今日对 2023 骁龙峰会进行了预热，本次大会将以 %ign%ignore_a_1%re_a_1% 为主题，届时骁龙 8 gen 3 处理器也很大可能在本届峰会亮相。 在临近活动召开之日，相关业内人士也透露了高通骁龙8Gen3跑分及规格。据悉，高通骁龙8 …

    程序猿的头像 程序猿
    2026年5月10日 • 用户投稿
    000
  • C++如何编译和链接_C++从源码到可执行文件的过程解析 用户投稿

    C++如何编译和链接_C++从源码到可执行文件的过程解析

    c++kquote>预处理展开宏和头文件，编译生成汇编代码，汇编转为机器码，链接合并目标文件与库生成可执行程序。 当你写完一段C++代码，比如一个简单的hello world程序，最终能运行起来，背后其实经历了一系列步骤：预处理、编译、汇编和链接。这个过程将人类可读的源码转换成机器可以执行的程…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • JavaScript DOM操作：点击关联元素获取目标文本内容的教程 用户投稿

    JavaScript DOM操作：点击关联元素获取目标文本内容的教程

    本教程详细介绍了如何通过JavaScript处理用户点击事件，并结合DOM的 closest() 和 querySelector() 方法，从复杂的HTML结构中准确获取目标元素的文本内容。文章强调了使用 addEventListener() 进行事件绑定、避免重复ID以及高效DOM遍历的最佳实践，…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 如何优化JavaScript代码的性能以避免运行时瓶颈？ 用户投稿

    如何优化JavaScript代码的性能以避免运行时瓶颈？

    优化JavaScript性能需减少DOM操作，通过缓存查询、使用DocumentFragment和合并样式修改来降低重排重绘；2. 采用事件委托减少内存占用并提升绑定效率；3. 拆分长任务，利用requestIdleCallback、Web Worker和requestAnimationFrame避…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Go应用中基于gorilla/mux的模块化路由管理策略 用户投稿

    Go应用中基于gorilla/mux的模块化路由管理策略

    本文探讨了在go应用中使用`gorilla/mux`实现模块化路由的有效策略。针对大型应用中路由配置日益复杂的问题，我们提出了一种去中心化的解决方案：通过在各个模块的`init()`函数中注册其专属路由到全局路由表，`main`函数统一加载，从而实现路由的清晰分离与高效管理，提升代码可维护性。 在构…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • XSLT中高效字符串匹配：优先使用XPath原生函数，而非PHP扩展 用户投稿

    XSLT中高效字符串匹配：优先使用XPath原生函数，而非PHP扩展

    本文旨在探讨在xslt中进行字符串匹配的正确方法。许多开发者可能尝试通过php扩展函数如`str_contains`来实现，但这常导致版本兼容性或语法问题。文章将重点推荐并演示如何利用xpath原生函数`contains()`和`starts-with()`进行高效、可靠的字符串匹配，强调其在性能、…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • XML流式解析的优势是什么？ 用户投稿

    XML流式解析的优势是什么？

    流式解析能高效处理超大XML文件，因它边读边处理，内存占用低。SAX事件驱动、性能高但状态管理复杂；StAX拉模式灵活可控，适合复杂逻辑。挑战包括上下文维护、错误恢复难、验证集成和无随机访问，需用栈管理、索引或混合模式应对。 XML流式解析的优势在于它能够以极低的内存消耗处理任意大小的XML文档，尤…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • XML格式美化有哪些工具？ 用户投稿

    XML格式美化有哪些工具？

    XML美化工具按使用场景分为在线工具、IDE插件、桌面GUI工具和命令行工具，选择应基于文件大小、使用频率、功能需求及团队规范。在线工具如XMLGrid.net适合临时小文件处理；VS Code、IntelliJ IDEA等IDE配合插件可实现高效开发与自动格式化；Notepad++（配XML To…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • Angular Material Table 数据源的正确绑定与异步数据处理 用户投稿

    Angular Material Table 数据源的正确绑定与异步数据处理

    在 Angular 应用中，将异步获取的数据正确绑定到 Material Table 的 `MatTableDataSource` 是一个常见挑战。本文将深入探讨 `MatTableDataSource` 的初始化时机，特别是如何处理数据加载的异步性，确保表格能够实时、准确地渲染数据，并提供一个结构…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • c语言如何生成html_用C语言程序输出HTML格式文件【文件】 用户投稿

    c语言如何生成html_用C语言程序输出HTML格式文件【文件】

    C语言动态生成HTML文件有五种方法：一、用fprintf逐行写入；二、构建缓冲区后fwrite一次性写入；三、用宏简化标签输出；四、从模板文件加载并替换变量；五、用结构体组织元素并序列化。 如果您希望使用C语言程序动态生成HTML格式的文件，则需要通过标准文件I/O操作将符合HTML语法的文本内容…

    程序猿的头像 程序猿
    2026年5月10日
    300
  • Go语言大文件读取性能优化：理解I/O瓶颈与Goroutine的合理应用 用户投稿

    Go语言大文件读取性能优化：理解I/O瓶颈与Goroutine的合理应用

    本文探讨Go语言中大文件读取的性能优化策略。针对常见的使用goroutine加速文件读取的误区，文章指出硬盘I/O是主要瓶颈，单纯增加CPU并发并不能提高读取速度。教程将解释I/O限制，并建议在数据处理环节而非读取环节考虑并发，以实现整体性能提升。 在处理go语言中的超大文件时，开发者常常会考虑使用…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • JavaScript下拉菜单动态显示与隐藏：CSS样式检测与事件冒泡深度解析 用户投稿

    JavaScript下拉菜单动态显示与隐藏：CSS样式检测与事件冒泡深度解析

    本文深入探讨了如何使用JavaScript实现下拉菜单的动态显示与隐藏，重点解决通过CSS类设置的display属性在JavaScript中无法直接通过element.style.display获取的问题，并讲解了如何有效处理事件冒泡，确保点击菜单外区域时菜单能正确隐藏。教程将提供详细的代码示例，帮…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Golang构建HTTP服务步骤 net/http包基础用法 用户投稿

    Golang构建HTTP服务步骤 net/http包基础用法

    Go语言通过net/http包可快速构建HTTP服务，核心步骤为：定义处理器函数处理请求、使用http.HandleFunc注册路由、调用http.ListenAndServe启动服务。处理器通过检查r.Method区分GET、POST等请求方法，利用r.URL.Query()获取查询参数，读取r.…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Golang模板方法模式与业务逻辑分离 用户投稿

    Golang模板方法模式与业务逻辑分离

    模板方法模式通过固定算法骨架实现业务逻辑分离，Go中用接口定义Read、Validate、Transform、Save步骤，由CSVProcessor和JSONProcessor等具体类型实现差异化处理，统一流程控制在ProcessDataTemplate函数中。 Golang中的模板方法模式提供了…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • PHP源码命令行工具开发_PHP源码命令行工具开发教程 用户投稿

    PHP源码命令行工具开发_PHP源码命令行工具开发教程

    答案是使用PHP开发命令行工具需依托CLI SAPI，结合Composer管理依赖，并推荐采用Symfony Console等组件库来构建。首先确保PHP支持CLI模式，通过编写基础脚本并利用$argv和getopt()处理参数，但更优方式是引入Symfony Console组件进行命令定义与输入输…

    程序猿的头像 程序猿
    2026年5月10日
    000

发表回复

登录后才能评论
关注微信