jQuery 中的计算器价格表

Question

我正在 jQuery 开发计算器，您可以在其中拥有可变数量的用户和位置。所以我有两个下拉菜单，您可以在其中 select 您的用户数量和位置数量。

您可以在 3 个套餐中进行选择：go、pro 和 expert。我下面的示例将用于 go 包。

Go 套餐的每月起价为 130 欧元。这包括 1 个用户 和 1 个位置。

这是我的 2 个下拉菜单：

<select class="js-users">
                <?php 
                    $numUsers = 1;
                    while($numUsers <= 15) {
                ?>
                <option value="<?php echo $numUsers; ?>"><?php echo $numUsers; ?></option>
                <?php 
                    $numUsers ++;
                    } 
                ?>
</select>

<select class="js-locations">
                <?php 
                    $numLocations = 1;
                    while($numLocations <= 15) {
                ?>
                <option value="<?php echo $numLocations; ?>"><?php echo $numLocations; ?></option>
                <?php 
                    $numLocations ++;
                    } 
                ?>
</select>

默认价格 go package = 130 欧元（这包括 1 个用户和 1 个位置）。
一个额外的用户 = 15 欧元
一个额外的位置 = 75 欧元

默认情况下，select编辑了 1 个用户和 1 个位置。当您将用户数量更改为例如 2 个用户时，总价将为 130 + (15 * 2) = 160 欧元

当您将位置数更改为 3 时，新的总价将为 130 + (15 * 2) + (75 * 3) = 385

使用下面的代码，总是会覆盖之前的 selected 值。

我的 jQuery 代码如下所示：

jQuery(function($){

    //define the base price per package
    var priceGo = 130,
        pricePro = 295,
        priceExpert = 495;

    //define total var
    var priceTotal = 0;

    //multipliers
    var priceUser = 15,
        priceLocation = 75,
        numUsers = 1,
        numLocations = 1;


    $('.js-calculator-go .js-users').on('change', function(e){

        priceTotal = priceGo + (priceUser * $(this).val());

        console.log(priceTotal);

    });


    $('.js-calculator-go .js-locations').on('change', function(e){

        priceTotal = priceGo + (priceLocation * $(this).val());

        console.log(priceTotal);
    });

});

Answer 1

问题是您在进行每次计算时都没有考虑其他下拉列表中的选定值。

将计算移交给从两个 "change" 事件调用的单个函数会更有意义，并且在重新计算时考虑每个下拉列表中的当前选定值。这样您就不会复制任何计算逻辑，并且该逻辑不会直接绑定到提供它的 UI 元素：

//define the base price per package
var priceGo = 130,
    pricePro = 295,
    priceExpert = 495;

//define total var
var priceTotal = 0;

//multipliers
var priceUser = 15,
    priceLocation = 75;

$('.js-calculator-go .js-locations, .js-calculator-go .js-users').on('change', calculatePrice);

function calculatePrice()
{
    priceTotal = priceGo + (priceUser * $('.js-calculator-go .js-users').val()) + (priceLocation * $('.js-calculator-go .js-locations').val());
    console.log(priceTotal);
}

jQuery 中的计算器价格表

Calculator price form in jQuery

jquery

calculator