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

使用jQuery实现动态输入框的价格与数量联动计算教程

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

使用jQuery实现动态输入框的价格与数量联动计算教程

本教程旨在详细指导如何在Web应用中，利用jQuery实现对动态生成的订单项（如商品名称、单价、数量）进行实时总价计算。我们将探讨如何为动态元素绑定事件监听器，遍历并获取每个项目的单价和数量，最终计算出订单总价，并提供完整的代码示例与优化建议。

在构建在线订餐或购物应用时，一个常见的需求是允许用户动态添加多个商品条目，并实时显示这些条目的总价。这涉及到前端动态元素的生成、数据获取以及实时的数学计算。本教程将以一个典型的订单详情页面为例，详细讲解如何使用jquery来优雅地解决这一问题。

核心思路：动态计算与事件绑定

问题的核心在于两个方面：

动态生成元素： 用户可以点击按钮添加新的商品选择行，每行包含商品名称选择框、单价输入框和数量输入框。实时总价计算： 当任何一个商品的“数量”发生变化时，系统需要重新计算所有商品的“单价 × 数量”之和，并更新总价显示。

由于商品行是动态添加的，传统的直接事件绑定方式可能无法覆盖到新生成的元素。因此，我们需要采用一种能够处理动态元素的事件绑定策略，并在每次数量变化时，遍历所有商品行进行计算。

实现步骤与代码解析

我们将分步解析HTML结构、PHP后端逻辑以及jQuery前端实现。

HTML结构回顾

订单详情部分通常包含一个容器，用于存放所有商品条目。每个条目包含：

商品名称选择框 (select): 用于选择商品，其值会触发后端请求获取价格。单价输入框 (input[type=”text”]): 显示所选商品的单价，通常为只读。数量输入框 (input[type=”number”]): 用户输入购买数量。

    
        
      
        
تفاصيل الطلب
      
      
        
                    
                          اختر الصنف

注意，为了方便jQuery选择和操作，我们为价格输入框添加了 price 类，为数量输入框添加了 quantity 类，为总价输入框添加了 total ID。

PHP后端服务

PHP后端（GetPrice.php）负责根据前端传递的商品名称（或ID）从数据库中查询并返回对应的价格。

prepare("SELECT price FROM all_menu WHERE `item_name` = :item_name");        $get_c->bindParam(':item_name', $id); // 使用参数绑定防止SQL注入        $get_c->execute();         while ($row = $get_c->fetch()) {            $code .= $row['price'];        }        echo $code.'.00'; // 返回价格，格式化为 .00    }?>

重要提示： 在实际生产环境中，请务必使用预处理语句和参数绑定来防止SQL注入，如上述代码所示。

jQuery前端逻辑

jQuery代码是实现动态功能的核心。

1. 获取商品价格

当用户选择商品名称时，通过AJAX请求后端获取价格并填充到对应的价格输入框。对于动态添加的行，需要为每个新行单独绑定 change 事件。

// 初始行的事件绑定$('#itemname').change(function(){  var code = $(this).val();    $.ajax({    type: 'POST',    url: 'pages/GetPrice.php',    data:{code:code},    success: function(data){      $('#price').val(data); // 使用jQuery选择器更简洁      handleQuantityChange(); // 价格更新后也可能影响总价，触发计算    },    error: function (jqXHR, textStatus, errorThrown){      alert(errorThrown);    }  });});
2. 动态添加行

点击“添加商品”按钮时，复制现有HTML结构并插入到页面中，同时为新行的元素赋予唯一的ID（如果需要）。

var nextRowID = 0;$('#add').click(function(e){  e.preventDefault();  var id = ++nextRowID;  // 构建新的行HTML，注意ID的动态生成  var newRowHtml = '
تفاصيل الطلب
اختر الصنف
';  $('#append').append(newRowHtml);  // 为新添加的商品名称选择框绑定事件  $('#itemname'+id+'').change(function(){    var code = $(this).val();      var currentRowId = $(this).attr('id').replace('itemname', ''); // 获取当前行的ID后缀    $.ajax({      type: 'POST',      url: 'pages/GetPrice.php',      data:{code:code},      success: function(data){        $('#price'+currentRowId+'').val(data);        handleQuantityChange(); // 价格更新后，重新计算总价      },      error: function (jqXHR, textStatus, errorThrown){        alert(errorThrown);      }    });  });  // 每次添加新行后，重新绑定或触发数量变化事件  handleQuantityChange(); });
3. 核心：动态总价计算函数

这是解决问题的关键。我们需要一个函数来遍历所有商品行，获取它们的单价和数量，然后计算总和。

function handleQuantityChange(){  // 解除旧的change事件绑定，然后重新绑定，确保只执行一次  // 对于动态添加的元素，更推荐使用事件委托（见注意事项）  $('.quantity').unbind('change').change(function(){    let totalAmount = 0.0;    // 遍历所有具有 'price' 类的输入框    $('.price').each(function(){      const priceElement = $(this);      // 找到与当前价格输入框在同一商品行内的数量输入框      // 这里通过 DOM 结构进行查找：      // priceElement.parent() -> 
 (价格输入框的父级)      // .parent() -> 
 (价格输入框的form-group)      // .next() -> 
 (数量输入框的form-group)      // .find('.quantity') -> 找到其中的数量输入框      const quantityElement = priceElement.closest('.form-group').next('.form-group').find('.quantity');      const price = parseFloat(priceElement.val()) || 0; // 确保是数字，默认为0      const quantity = parseFloat(quantityElement.val()) || 0; // 确保是数字，默认为0      totalAmount += price * quantity;    });    // 更新总价显示    $('#total').val(totalAmount.toFixed(2)); // 保留两位小数  });  // 首次加载或添加新行后，立即触发一次计算，确保总价是正确的  // 模拟一次数量变化，以便在页面加载时或新行添加后立即计算总价  $('.quantity').first().trigger('change');}

DOM遍历解释：priceElement.closest(‘.form-group’) 向上查找最近的 .form-group 父元素，这是包含价格输入框的整个行容器。next(‘.form-group’) 找到这个 form-group 的下一个兄弟元素，这通常是包含数量输入框的 form-group。find(‘.quantity’) 在这个数量的 form-group 中查找 quantity 类。

4. 整合事件监听

在文档加载完成后，以及每次动态添加新行后，都需要调用 handleQuantityChange() 函数，以确保所有当前存在的数量输入框都能正确绑定事件，并且总价能够被实时更新。

$(document).ready(function(){  // 页面加载完成后，初始化总价计算  handleQuantityChange();  // 初始行的商品名称选择事件  $('#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);      }    });  });  // 添加新行的按钮点击事件  var nextRowID = 0;  $('#add').click(function(e){    e.preventDefault();    var id = ++nextRowID;    // 构建新的行HTML，注意ID的动态生成    var newRowHtml = '
تفاصيل الطلب
اختر الصulo
';    $('#append').append(newRowHtml);    // 为新添加的商品名称选择框绑定事件    $('#itemname'+id+'').change(function(){      var code = $(this).val();        var currentRowId = $(this).attr('id').replace('itemname', '');      $.ajax({        type: 'POST',        url: 'pages/GetPrice.php',        data:{code:code},        success: function(data){          $('#price'+currentRowId+'').val(data);          handleQuantityChange(); // 价格更新后，重新计算总价        },        error: function (jqXHR, textStatus, errorThrown){          alert(errorThrown);        }      });    });    // 每次添加新行后，重新绑定或触发数量变化事件    handleQuantityChange();   });});

注意事项与优化建议

事件委托 (Event Delegation):在 handleQuantityChange 函数中，我们使用了 $(‘.quantity’).unbind(‘change’).change(…) 来重新绑定事件。这种方法在每次添加新行时都会解除并重新绑定所有 .quantity 元素的 change 事件。对于频繁添加新行的场景，这可能导致性能问题。更推荐的做法是使用事件委托，将事件绑定到父元素上，利用事件冒泡来监听动态子元素的事件。这样，无论何时添加新的 .quantity 元素，事件监听器都无需重新绑定。

// 优化后的 handleQuantityChange 函数function handleQuantityChange() {  let totalAmount = 0.0;  // 遍历所有具有 'price' 类的输入框  $('.price').each(function(){    const priceElement = $(this);    const quantityElement = priceElement.closest('.form-group').next('.form-group').find('.quantity');    const price = parseFloat(priceElement.val()) || 0;    const quantity = parseFloat(quantityElement.val()) || 0;    totalAmount += price * quantity;  });  $('#total').val(totalAmount.toFixed(2));}// 在 document ready 中使用事件委托$(document).ready(function(){  // 绑定数量输入框的change事件，使用事件委托  // 这里的'body'可以替换为更具体的、不会动态变化的父容器  $('body').on('change', '.quantity', handleQuantityChange);  // 绑定商品名称选择框的change事件，同样使用事件委托  $('body').on('change', '[name="itemname[]"]', function(){ // 使用name属性选择器更通用    var code = $(this).val();      var currentItemSelect = $(this); // 获取当前触发事件的select元素    $.ajax({      type: 'POST',      url: 'pages/GetPrice.php',      data:{code:code},      success: function(data){        // 找到当前select元素所在行的价格输入框        currentItemSelect.closest('.form-group').nextAll('.form-group').find('.price').val(data);        handleQuantityChange(); // 价格更新后，重新计算总价      },      error: function (jqXHR, textStatus, errorThrown){        alert(errorThrown);      }    });  });  // 添加新行的按钮点击事件  var nextRowID = 0;  $('#add').click(function(e){    e.preventDefault();    var id = ++nextRowID;    // 构建新的行HTML，注意ID的动态生成    // 确保新生成的select和input有正确的class和name属性    var newRowHtml = '
تفاصيل الطلب
اختر الصنف
';    $('#append').append(newRowHtml);    // 添加新行后，触发一次总价计算，以防新行有默认值    handleQuantityChange();   });  // 页面加载时，首次触发总价计算  handleQuantityChange();});

使用事件委托后，handleQuantityChange 函数本身不再需要负责绑定事件，它只负责计算逻辑。

数据类型转换与验证：在使用 parseFloat() 进行计算时，务必确保输入框的值是有效的数字。如果用户输入了非数字字符，parseFloat() 可能会返回 NaN。在计算前，可以使用 isNaN() 或逻辑或 || 0 来处理这种情况，确保计算结果的正确性。例如：parseFloat(value) || 0。

用户体验：

初始值： 确保数量输入框有合理的初始值（如 value=”1″ 或 value=”0″）。禁用只读字段： 价格字段设置为 readonly 是一个好习惯，防止用户误修改。格式化输出： 总价输出时，使用 toFixed(2) 可以确保金额显示为两位小数，符合财务规范。

总结

通过本教程，我们学习了如何利用jQuery处理动态生成的HTML元素，并实现复杂的实时计算逻辑。关键在于理解事件绑定的策略（尤其是事件委托），以及如何在DOM结构中准确地定位相关元素。掌握这些技术，将使您能够构建更加动态、响应式的Web应用。在实际开发中，始终考虑代码的可维护性、性能和用户体验，选择最适合当前场景的实现方式。

以上就是使用jQuery实现动态输入框的价格与数量联动计算教程的详细内容，更多请关注创想鸟其它相关文章！

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

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

关于作者

程序猿的头像

程序猿签约作者

414.1K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
SQL中处理逗号分隔字符串的高效匹配技巧：跨表关联与模式匹配
上一篇 2025年12月11日 04:45:58
PHP中判断数值是否为整数或存在小数部分的方法
下一篇 2025年12月11日 04:46:02

相关推荐

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

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

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

    程序猿的头像 程序猿
    2026年5月10日
    000
  • PHP动态生成表单输入与POST数据获取实践指南 用户投稿

    PHP动态生成表单输入与POST数据获取实践指南

    本教程详细阐述了如何在php中根据动态数据源（如数据库值）生成多个表单输入框，并演示了如何通过post方法准确无误地获取这些动态生成的输入值。文章强调了正确的输入框命名策略，避免了常见的命名误区，并提供了完整的代码示例，确保开发者能够高效处理动态表单数据。 动态生成表单输入 在Web开发中，我们经常…

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

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

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

    程序猿的头像 程序猿
    2026年5月10日
    200
  • html5怎么画实线_HTML5用CSS border-style:solid画元素实线边框【绘制】 用户投稿

    html5怎么画实线_HTML5用CSS border-style:solid画元素实线边框【绘制】

    可通过CSS的border-style属性设为solid添加实线边框：一、内联样式用border:2px solid #000；二、内部样式表统一设置如div{border:1px solid #333}；三、外部CSS文件定义.my-box{border:3px solid red}并引入；四、单…

    程序猿的头像 程序猿
    2026年5月10日
    200
  • 如何讲html和css_讲解HTML与CSS结合使用基础【基础】 用户投稿

    如何讲html和css_讲解HTML与CSS结合使用基础【基础】

    需将HTML与CSS结合使用以实现网页结构与样式的分离：HTML定义标题、段落等语义结构，CSS控制颜色、字体等外观；可通过内联样式、内部样式表或外部CSS文件引入样式，并利用类选择器和ID选择器精准应用。 如果您希望网页不仅展示内容，还能具备基本的样式和结构布局，则需要将HTML与CSS结合使用。…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • CSS伪元素与固定背景：移动友好的实现策略 用户投稿

    CSS伪元素与固定背景：移动友好的实现策略

    本文深入探讨了如何利用CSS的::before伪元素、position: fixed和z-index属性，创建一种在移动设备上表现更稳定的全屏固定背景效果，以替代传统background-attachment: fixed可能存在的兼容性问题。教程将详细解析这些核心CSS概念及其在构建响应式布局中的…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • PHP多维数组到复杂XML结构的SOAP序列化实践 用户投稿

    PHP多维数组到复杂XML结构的SOAP序列化实践

    本文旨在解决php多维数组向复杂soap xml结构序列化时遇到的“无法序列化结果”问题。通过深入理解soap xml的结构要求，包括命名空间和类型属性，文章将指导您如何构建符合特定xml schema的php关联数组。我们将利用`spatie/array-to-xml`库，详细演示其安装与使用方法…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • HTML中如何实现MathML 用户投稿

    HTML中如何实现MathML

    答案是利用HTML5原生支持MathML，只需将MathML代码嵌入标签即可，现代浏览器能直接渲染，无需插件；通过CSS可美化公式样式，如字体、颜色、间距等，提升显示效果；对于老旧浏览器，推荐使用MathJax作为兼容方案，支持LaTeX输入并渲染为高质量公式，兼顾可访问性与跨浏览器兼容性。 在HT…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Bootstrap和MDB固定导航栏遮挡内容：如何优雅地解决页面跳转后内容被遮挡的问题？ 用户投稿

    Bootstrap和MDB固定导航栏遮挡内容：如何优雅地解决页面跳转后内容被遮挡的问题？

    解决bootstrap和mdb固定导航栏遮挡内容的问题 使用Bootstrap和MDB框架构建网站时，固定导航栏遮挡内容是一个常见问题。尤其在页面跳转后，目标内容区域会被导航栏遮挡。本文提供一种优雅的解决方案，无需修改HTML结构，即可在页面跳转后自动调整滚动位置，避免内容被遮挡。 问题：点击导航链…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • php代码如何操作JSON数据_php代码解析和生成JSON的方法 用户投稿

    php代码如何操作JSON数据_php代码解析和生成JSON的方法

    答案：PHP中处理JSON需使用json_encode()和json_decode()函数。1、将数组转为JSON字符串时，用json_encode()并检查返回值是否为false；2、解析JSON字符串时，调用json_decode()并设第二参数为true返回数组，false则返回对象；3、处理…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 从指定ID开始输出DOM元素列表 用户投稿

    从指定ID开始输出DOM元素列表

    本文旨在提供一个JavaScript教程，指导开发者如何从用户指定的ID元素开始，输出DOM元素列表。通过修改现有的DOM树遍历函数，并结合用户输入，我们可以动态地展示DOM树的特定部分。本文将详细解释如何获取用户输入、定位起始元素，以及构建和显示DOM元素列表。 实现原理 核心思路在于修改原有的 …

    程序猿的头像 程序猿
    2026年5月10日
    100
  • WebAssembly中导入JavaScript函数：无胶水代码集成指南 用户投稿

    WebAssembly中导入JavaScript函数：无胶水代码集成指南

    本文深入探讨了在WebAssembly模块中直接导入和使用JavaScript函数的机制，特别是当使用Emscripten的STANDALONE_WASM和SIDE_MODULE编译模式时。文章详细分析了TypeError: import object field ‘GOT.mem&#8…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 解决React中按钮点击不显示弹出表单的问题：状态管理与语法修正 用户投稿

    解决React中按钮点击不显示弹出表单的问题：状态管理与语法修正

    本教程旨在解决react应用中点击按钮后弹出表单未能正确渲染的问题。核心在于识别并修正代码中的语法错误以及未定义的react状态管理函数。我们将详细探讨如何使用`usestate`等react hooks来声明和管理组件状态，确保交互逻辑的正确实现，并提供结构清晰的代码示例，帮助开发者构建功能完善的…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 使用 JavaScript 将变量值显示在 <h1> 标签中 用户投稿

    使用 JavaScript 将变量值显示在 <h1> 标签中

    本文旨在解决 JavaScript 中无法将变量值正确显示在 标签中的问题。我们将通过分析常见错误原因，提供清晰的代码示例，并介绍最佳实践，帮助开发者正确地使用 JavaScript 操作 DOM 元素，实现动态更新 标签内容的功能。 在 Web 开发中，经常需要使用 JavaScript 动态地更…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • JavaScript中为动态列表元素创建唯一悬停描述的教程 用户投稿

    JavaScript中为动态列表元素创建唯一悬停描述的教程

    本教程旨在解决如何为动态生成的列表或数组元素分配唯一悬停描述（tooltip）的问题。文章将深入探讨使用javascript对象和map数据结构来高效地管理名称与描述的映射关系，并提供具体的代码示例，以实现每个列表项在鼠标悬停时显示不同的自定义信息，同时兼顾性能与数据顺序的需求。 在网页开发中，我们…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 使用 Python 格式化输出列表和嵌套列表，创建表格形式的数据展示 用户投稿

    使用 Python 格式化输出列表和嵌套列表，创建表格形式的数据展示

    本文旨在介绍如何使用 Python 编程语言，在不依赖任何外部模块的前提下，将列表和嵌套列表的数据以表格形式进行格式化输出。文章将详细讲解如何利用 zip() 函数以及字符串格式化技巧，实现美观且易于阅读的表格数据呈现，并提供完整的代码示例和解释。 在数据处理和展示中，将数据以表格形式呈现是一种常见…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • HTML Canvas动画残影消除：实现动态元素无痕移动 用户投稿

    HTML Canvas动画残影消除：实现动态元素无痕移动

    本文旨在解决HTML Canvas动画中元素移动时产生的残影问题。通过在每个动画帧开始时清空并重绘Canvas背景，可以有效消除元素留下的“轨迹”，实现平滑、无痕的动态效果。文章将详细介绍背景重绘的实现方法，并提供代码示例，同时探讨如何利用半透明背景创建渐隐残影的进阶技巧。 理解Canvas动画中的…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • JS如何操作HTML元素_DOM编程核心方法【教程】 用户投稿

    JS如何操作HTML元素_DOM编程核心方法【教程】

    必须掌握操作HTML元素的核心DOM方法：一、通过ID获取单个元素；二、通过类名获取元素集合；三、通过标签名获取元素集合；四、通过CSS选择器获取元素；五、为元素绑定事件监听器；六、创建并插入新元素；七、替换或删除现有元素。 如果您希望使用JavaScript动态修改网页内容、响应用户交互或构建交互…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 在React应用中实现动态CSS类名切换的教程 用户投稿

    在React应用中实现动态CSS类名切换的教程

    本教程详细讲解如何在React应用中利用useState管理组件状态，并结合classnames工具库动态修改现有元素的CSS类名，从而实现如游戏反馈（正确/错误提示）等视觉效果。通过更新状态触发组件重新渲染，实现灵活的UI变化，提升用户体验。 在react开发中，我们经常需要根据应用程序的状态变化…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 在鸿蒙应用开发中，如何捕获用户的交互行为？ 用户投稿

    在鸿蒙应用开发中，如何捕获用户的交互行为？

    鸿蒙应用开发中，有效捕获用户交互行为至关重要。本文将介绍如何在鸿蒙系统中监听用户点击等事件，替代传统开发中的window.on方法。 鸿蒙系统不直接支持window.on方式。但提供了其他机制来处理用户交互： 组件事件监听: 对于按钮等组件，使用相应的事件监听器方法。例如，按钮点击事件可以使用set…

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

发表回复

登录后才能评论
关注微信