本文旨在解决在使用 jQuery 计算动态添加的元素总金额时，页面初始加载时总金额显示为 0 的问题。通过修改事件绑定方式，并在适当的时机调用计算总金额的函数，确保总金额能够正确地随着用户选择而更新。同时，避免在HTML中直接使用事件监听器，采用`.addEventListener`实现更佳的代码可维护性。
在使用 jQuery 开发 Web 应用时，经常需要动态计算页面元素的值，并显示总金额。一个常见的问题是，当页面加载时，由于某些元素是动态生成的，jQuery 可能无法立即获取到这些元素，导致计算出的总金额为 0。本文将详细介绍如何解决这个问题，并提供一个可行的解决方案。
问题分析
问题的根源在于 jQuery 的 $(document).ready() 函数只在页面加载完成后执行一次。如果在 ready 函数执行时，动态添加的元素尚未生成，那么 jQuery 就无法获取到这些元素，导致总金额计算错误。
解决方案
为了解决这个问题，我们需要在每次动态添加元素后，都重新计算总金额。具体步骤如下：
移除 HTML 中的 onChange 事件监听器：避免在 HTML 中直接绑定事件监听器，这不利于代码的维护和管理。使用 addEventListener 绑定事件：在 $(document).ready() 函数中使用 addEventListener 来监听 select 元素的 change 事件。创建 computeTotal() 函数：该函数负责计算总金额，并将其显示在页面上。在事件处理函数中调用 computeTotal()：在 selectedAfternoon() 和 selectedCommute() 函数中，每次动态添加元素后，都调用 computeTotal() 函数。在 $(document).ready() 函数中调用 computeTotal()：确保页面加载时，即使没有选择任何选项，也能正确显示初始总金额（通常为 0）。
代码示例
以下是修改后的代码：
function selectedAfternoon(element) { var text = element.options[element.selectedIndex].value; document.getElementById("output-selected-option-afternoon").innerHTML = "" + text.split("|").join("") + ""; document.getElementById("output-selected-option-afternoon").querySelector("div:last-child").classList.add("priceSelectedOption") computeTotal()}function selectedCommute(element) { var text = element.options[element.selectedIndex].value; document.getElementById("output-selected-option-commute").innerHTML = "" + text.split("|").join("") + ""; document.getElementById("output-selected-option-commute").querySelector("div:last-child").classList.add("priceSelectedOption") computeTotal()}function computeTotal() { var total = 0; $('.priceSelectedOption').each(function() { total += parseFloat($(this).text().replace(/,/g, '')) }) $('.totalPrice').text(total)}$(document).ready(function() { document .getElementById('Onderweg') .addEventListener('change', function() { selectedCommute(this) }) document .getElementById('Namiddag') .addEventListener('change', function() { selectedAfternoon(this) }) computeTotal()})
13x19 cm, €12.50 20x30 cm, €22.50 30x45 cm, €32.50 Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., 13x19 cm, €12.50 20x30 cm, €22.50 30x45 cm, €32.50 Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen.,Total
CSS 代码保持不变
.js-basic-single { width: 100%;}#output-selections { display: flex; flex-direction: column; grid-column-gap: 1rem; grid-row-gap: 1rem;}.selected-option { display: flex; width: 100%; flex-direction: row; justify-content: space-between; align-items: center;}.priceSelectedOption::before,.totalPrice::before { content: '€ ';}
代码解释
selectedAfternoon(element) 和 selectedCommute(element) 函数：这两个函数负责根据用户的选择，动态地将选中的选项添加到页面中。computeTotal() 函数：该函数使用 jQuery 的 .each() 方法遍历所有具有 priceSelectedOption 类的元素，并将它们的值累加起来。然后，将总金额显示在具有 totalPrice 类的元素中。$(document).ready() 函数：该函数在页面加载完成后执行，用于绑定事件监听器和初始化总金额。
注意事项
确保在页面中引入 jQuery 库。确保 CSS 样式正确，以便正确显示总金额。如果需要处理更复杂的计算逻辑，可以根据实际情况修改 computeTotal() 函数。避免在 HTML 中直接绑定事件监听器，使用 addEventListener 可以提高代码的可维护性和可读性。
总结
通过以上步骤，可以有效地解决在使用 jQuery 计算动态添加的元素总金额时，页面初始加载时总金额显示为 0 的问题。 关键在于在每次动态添加元素后，都重新计算总金额，并使用 addEventListener 来绑定事件监听器，避免在 HTML 中直接绑定事件监听器。 这种方法可以确保总金额能够正确地随着用户选择而更新，并提高代码的可维护性和可读性。
以上就是jQuery计算总金额显示为0的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588745.html
微信扫一扫 
支付宝扫一扫 
