投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  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 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月11日 04:45:58
下一篇 2025年12月11日 04:46:02

相关推荐

发表回复

登录后才能评论
关注微信