jQuery价格计算异常：附加服务仅单个生效问题排查与修复

问题现象 #

当前jQuery脚本中，配送选项（#ship-price-a/#ship-price-b）计算逻辑看似正常，但附加服务选项（#service-price-a/#service-price-b）仅能加入一项服务价格，无法实现多选累加。

问题根源 #

1. 未区分单选/多选逻辑：配送属于单选（用户仅能选一种），服务属于多选（用户可同时选多种），但原代码统一使用累加逻辑，导致配送选项重复叠加价格，服务选项无法正确处理取消选中的情况。
2. 全局变量管理混乱：仅用单个变量维护最终价格，未单独记录已选配送价和服务总价，导致状态不可控。
3. 代码重复冗余：四个点击事件逻辑高度重复，易引发一致性错误（如#ship-price-b中错误使用parseInt处理产品价）。

修复方案 #

以下是重构后的代码，优化了逻辑结构，区分单选/多选处理，统一计算逻辑：

<script>
jQuery(document).ready(function($){
    // 初始化变量：维护基础价、已选配送价、已选服务总价
    let basePrice = 0;
    let selectedShipping = 0;
    let selectedServicesTotal = 0;
    const finalPriceEl = $('#final-price');
    const originalPriceEl = $('#original-price').find('.woocommerce-Price-amount');

    // 初始化基础产品价：处理带货币符号的价格文本
    function initBasePrice() {
        if (basePrice === 0) {
            const priceText = originalPriceEl.text().replace(/[^\d.,]/g, '').replace(',', '.');
            basePrice = parseFloat(priceText) || 0;
        }
    }

    // 统一计算并更新最终价格
    function updateFinalPrice() {
        const total = basePrice + selectedShipping + selectedServicesTotal;
        // 转换为欧洲格式的价格文本（逗号分隔小数）
        const formattedTotal = total.toFixed(2).replace('.', ',') + '€';
        finalPriceEl.text(formattedTotal);
        console.log('当前最终价格：', total);
    }

    // 配送选项（单选逻辑）：替换已选配送价
    $('[id^="ship-price-"]').on('click', function(){
        initBasePrice();
        // 重置所有配送选项的选中状态（如果是radio/checkbox）
        $('[id^="ship-price-"]').not(this).prop('checked', false);
        // 获取当前配送价
        const shippingPrice = parseFloat($(this).attr('data-price')) || 0;
        selectedShipping = shippingPrice;
        updateFinalPrice();
    });

    // 服务选项（多选逻辑）：根据选中状态累加/扣除价格
    $('[id^="service-price-"]').on('click', function(){
        initBasePrice();
        const servicePrice = parseFloat($(this).attr('data-price')) || 0;
        if ($(this).is(':checked')) {
            // 选中：累加服务价
            selectedServicesTotal += servicePrice;
        } else {
            // 取消选中：扣除服务价
            selectedServicesTotal -= servicePrice;
        }
        updateFinalPrice();
    });
});
</script>

修复说明 #

1. 变量拆分：用basePrice存储基础产品价，selectedShipping存储当前选中的配送价，selectedServicesTotal存储已选服务的总价，状态清晰可控。
2. 单选逻辑处理：配送选项点击时，自动取消其他配送选项的选中状态，替换当前配送价后重新计算总价。
3. 多选逻辑处理：服务选项根据选中状态，动态累加或扣除对应价格，支持多次选择/取消。
4. 统一计算函数：将价格计算和更新逻辑抽离为updateFinalPrice，避免代码重复，确保一致性。
5. 价格文本处理：优化基础价的获取逻辑，自动去除货币符号，处理逗号/小数点的转换，避免解析错误。
6. 容错处理：使用|| 0确保价格解析失败时不会出现NaN，提升代码健壮性。

内容的提问来源于stack exchange，提问作者OHICT