17370845950

本文旨在解决在使用 jQuery 计算动态添加的元素总金额时，页面初始加载时总金额显示为 0 的问题。通过修改事件绑定方式，并在适当的时机调用计算总金额的函数，确保总金额能够正确地随着用户选择而更新。同时，避免在HTML中直接使用事件监听器，采用`.addEventListener`实现更佳的代码可维护性。

在使用 jQuery 开发 Web 应用时，经常需要动态计算页面元素的值，并显示总金额。一个常见的问题是，当页面加载时，由于某些元素是动态生成的，jQuery 可能无法立即获取到这些元素，导致计算出的总金额为 0。本文将详细介绍如何解决这个问题，并提供一个可行的解决方案。

问题分析

问题的根源在于 jQuery 的 $(document).ready() 函数只在页面加载完成后执行一次。如果在 ready 函数执行时，动态添加的元素尚未生成，那么 jQuery 就无法获取到这些元素，导致总金额计算错误。

解决方案

为了解决这个问题，我们需要在每次动态添加元素后，都重新计算总金额。具体步骤如下：

1. 移除 HTML 中的 onChange 事件监听器：避免在 HTML 中直接绑定事件监听器，这不利于代码的维护和管理。
2. 使用 addEventListener 绑定事件：在 $(document).ready() 函数中使用 addEventListener 来监听 select 元素的 change 事件。
3. 创建 computeTotal() 函数：该函数负责计算总金额，并将其显示在页面上。
4. 在事件处理函数中调用 computeTotal()：在 selectedAfternoon() 和 selectedCommute() 函数中，每次动态添加元素后，都调用 computeTotal() 函数。
5. 在 $(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 中直接绑定事件监听器。 这种方法可以确保总金额能够正确地随着用户选择而更新，并提高代码的可维护性和可读性。