jQuery计算总金额显示为0的解决方案-html教程-PHP中文网

jQuery计算总金额显示为0的解决方案

DDD

发布： 2025-10-26 08:21:34

原创

993人浏览过

jquery计算总金额显示为0的解决方案

本文旨在解决在使用 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 中直接绑定事件监听器。这种方法可以确保总金额能够正确地随着用户选择而更新，并提高代码的可维护性和可读性。

以上就是jQuery计算总金额显示为0的解决方案的详细内容，更多请关注php中文网其它相关文章！