jQuery计算总金额显示为0的解决方案_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-26

浏览次数：次

返回列表

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

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

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

问题分析

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

解决方案

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

Mureka

Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。

1091 查看详情 Mureka

移除 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的解决方案的详细内容，更多请关注其它相关文章！

# jquery # 定海路街道网站推广竞价 # 房产seo获客 # 宁波网站建设培训哪家好 # 也能 # 完成后 # 显示效果 # 正确地 # 解决这个问题 # 单选框 # 表单 # 绑定 # css # html # js # ajax # ssl # win # cdn # asic # 总金额 # 加载 # 美容整形seo站群 # 宁国百度网站优化 # 营销视频推广隐迅推推荐 # 天津企业营销推广策划 # 海口出名的问答营销推广 # 营销号推广推博主怎么收费 # 大岭山网站建设哪家专业

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：HTML5怎么设置边框位置_HTML5盒子模型边框定位技巧

下一篇：J*aScript剪切板操作权限

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们