本文解决 jquery 动态累加商品基础价、运费与附加服务费时出现的重复覆盖、类型错误和状态丢失问题，通过状态隔离、函数封装与数值初始化确保多选项价格计算准确可靠。
本文解决 jquery 动态累加商品基础价、运费与附加服务费时出现的重复覆盖、类型错误和状态丢失问题，通过状态隔离、函数封装与数值初始化确保多选项价格计算准确可靠。
在 WooCommerce + Elementor 场景中，常需通过前端交互动态计算最终价格（如基础价 + 运费 + 多项可选服务）。原始代码虽逻辑看似完整，但存在三个关键缺陷，导致 #service-price-a 和 #service-price-b 无法同时生效：
-
状态未隔离：
shippingPrice和servicePrice共用同一变量，但服务类点击事件中未做累加，而是每次覆盖赋值； -
类型不一致：部分地方用
parseInt()（截断小数），部分用parseFloat()，易造成精度丢失（如€19,99被解析为19）； - 逻辑冗余且不可复用：四段高度相似的事件处理代码，缺乏统一更新入口，维护困难且易出错。
✅ 正确做法是：分离数据状态、统一解析逻辑、封装更新行为。以下是优化后的完整解决方案：
jQuery(document).ready(function($) {
// ✅ 初始化所有状态变量（明确初始值，避免 undefined 参与运算）
let productPrice = null; // 基础商品价格（字符串，仅读取一次）
let shippingPrice = 0; // 当前选中的运费（单选，覆盖赋值）
let servicePrice = 0; // 已选服务总费用（多选，持续累加）
// ? 安全获取基础价格（仅执行一次）
function getProductPrice() {
if (productPrice === null) {
const $priceEl = $('#original-price').find('.woocommerce-Price-amount');
// 提取纯数字（兼容 €19,99 或 €19.99 等格式）
const rawText = $priceEl.text().replace(/[^\d.,]/g, '');
productPrice = parseFloat(rawText.replace(',', '.')) || 0;
}
}
// ? 核心计算与渲染函数（单一可信入口）
function updateFinalPrice() {
if (productPrice === null) return;
const total = productPrice + shippingPrice + servicePrice;
// 保留两位小数，替换小数点为逗号（符合欧元本地化显示）
const formatted = total.toFixed(2).replace('.', ',') + '€';
$('#final-price').text(formatted);
}
// ? 运费选择（单选：覆盖 shippingPrice）
$('#ship-price-a, #ship-price-b').on('click', function() {
getProductPrice();
shippingPrice = parseFloat($(this).attr('data-price')) || 0;
updateFinalPrice();
});
// ⚙️ 服务选择（多选：累加 servicePrice）
$('#service-price-a, #service-price-b').on('click', function() {
getProductPrice();
const price = parseFloat($(this).attr('data-price')) || 0;
servicePrice += price; // ✅ 关键修复：使用 += 实现累加
updateFinalPrice();
});
});? 关键改进说明：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
-
servicePrice初始化为0（而非undefined），确保后续+=运算安全； - 所有价格解析统一使用
parseFloat()+ 容错处理（|| 0），杜绝NaN导致计算中断； -
getProductPrice()保证基础价只读取一次，避免 DOM 查找开销与潜在变动风险； -
updateFinalPrice()集中管控渲染逻辑，便于后期扩展 VAT、折扣等计算项。
⚠️ 注意事项：
- 若需支持「取消已选服务」，建议为每个服务按钮添加
data-selected="true"状态，并在点击时判断：若已选则减去对应价格，否则累加； -
data-price属性值务必为纯数字（如12.5），避免含单位（如12.5€），否则parseFloat()将返回12.5（仍可用），但语义不严谨； - 在 Elementor 自定义代码中，请确认脚本加载时机早于目标元素（推荐勾选 Execute in footer 并确保 DOM 就绪）。
通过以上重构，价格计算逻辑清晰、健壮、可维护，彻底解决“仅一项服务生效”的问题，为复杂电商交互打下坚实前端基础。
