Question

我正在使用jQuery中的计算器，您可以在其中使用可变数量的用户和位置。因此，我有两个下拉菜单，您可以在其中选择用户数量和位置数量。

您可以选择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>

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

默认情况下，选择1个用户和1个位置。当您将用户数更改为例如2个用户时，总价将为130 +（15 * 2）= 160欧元

当您将地点数量更改为3时，新的总价将为130 +（15 * 2）+（75 * 3）= 385

在下面的代码中，总是覆盖以前选择的值。

我的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中的计算器价格表

1 个答案: