jQuery - 价格计算错误

Question

我有以下代码在Elementor的自定义代码中，它被加载在body标签的末尾。

我遇到了一个问题，这段代码应该在用户点击购买某些附加服务时计算产品的最终价格。

对于#ship-price-a和#ship-price-b，计算是正确的。但当用户尝试添加#service-price-a和#service-price-b时，计算结果会出错，只会将其中一个服务的价格计入总金额。请问代码中存在什么问题，我需要在哪里进行修改以修复这个问题？

Ryan Cavanaugh · Answer

jQuery(document).ready(function($){
var productPrice = null;
var finalProductPrice = null;
var shippingPrice = null;
var servicePrice = 0; // 将servicePrice初始化为0
var result;
var output;

function updateFinalPrice() {
    if (productPrice !== null) {
        finalProductPrice = parseFloat(productPrice) + parseFloat(shippingPrice || 0) + servicePrice;
        result = finalProductPrice.toFixed(2).replace('.', ',') + '€';
        $('#final-price').text(result);
    }
}

function getProductPrice() {
    if (productPrice === null) {
        productPrice = $('#original-price').find('.woocommerce-Price-amount').text();
    }
}

$('#ship-price-a, #ship-price-b').on('click', function(){ 
    getProductPrice();
    shippingPrice = $(this).attr('data-price');
    updateFinalPrice();
});

$('#service-price-a, #service-price-b').on('click', function(){
    getProductPrice();
    servicePrice += parseFloat($(this).attr('data-price')); // 计算服务价格
    updateFinalPrice();
});

});

将servicePrice初始化为0，用于存储服务价格。
在一个独立的updateFinalPrice函数中移除用于更新最终价格的参数。
创建任何运输或价值更新都会更新finalProductPrice，确保所有选中的交易都被计入总额。

Vladimir · Answer

@ictdev 是的，您可以修改代码以防止服务被多次添加，并允许用户在不同服务选项之间切换：

jQuery(document).ready(function($){
var productPrice = null;
var finalProductPrice = null;
var shippingPrice = null;
var selectedServices = {}; // 用以跟踪已选服务的对象
var result;
var output;

    function updateFinalPrice() {
        var totalServicePrice = 0;
        for (var key in selectedServices) {
            totalServicePrice += parseFloat(selectedServices[key]);
        }

        if (productPrice !== null) {
            finalProductPrice = parseFloat(productPrice) + parseFloat(shippingPrice || 0) + totalServicePrice;
            result = finalProductPrice.toFixed(2).replace('.', ',') + '€';
            $('#final-price').text(result);
        }
    }

    function getProductPrice() {
        if (productPrice === null) {
            productPrice = $('#original-price').find('.woocommerce-Price-amount').text();
        }
    }

    $('#ship-price-a, #ship-price-b').on('click', function(){ 
        getProductPrice();
        shippingPrice = $(this).attr('data-price');
        updateFinalPrice();
    });

    $('#service-price-a, #service-price-b').on('click', function(){
        getProductPrice();
        var serviceId = $(this).attr('id');
        selectedServices[serviceId] = $(this).attr('data-price'); // 添加或更新所选服务
        updateFinalPrice();
    });
});