本文旨在解决在使用 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 = "<div>" + text.split("|").join("</div><div>") + "</div>";
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 = "<div>" + text.split("|").join("</div><div>") + "</div>";
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()
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="Namiddag" name="Namiddag" data-name="Namiddag" class="js-basic-single"> <option></option> <option id="13x19namiddag" value="Namiddag|13x19 cm|12,50">13x19 cm, €12.50</option> <option id="20x30namiddag" value="Namiddag|20x30 cm|22,50">20x30 cm, €22.50</option> <option id="30x45namiddag" value="Namiddag|30x45 cm|32,50">30x45 cm, €32.50</option> <option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., </option> </select> <select id="Onderweg" name="Onderweg" data-name="Onderweg" class="js-basic-single"> <option></option> <option id="13x19onderweg" value="Onderweg|13x19 cm|12,50">13x19 cm, €12.50</option> <option id="20x30onderweg" value="Onderweg|20x30 cm|22,50">20x30 cm, €22.50</option> <option id="30x45onderweg" value="Onderweg|30x45 cm|32,50">30x45 cm, €32.50</option> <option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., </option> </select> <div id="output-selections"> <div class="selected-option" id="output-selected-option-afternoon"></div> <div class="selected-option" id="output-selected-option-commute"></div> </div> <h3>Total</h3> <div class="totalPrice"></div>
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 中直接绑定事件监听器。 这种方法可以确保总金额能够正确地随着用户选择而更新，并提高代码的可维护性和可读性。
