代码之家 › 专栏 › 技术社区 › Dennis

jQuery中的计算器价格表

calculator jquery

Dennis · 技术社区 · 7 年前

我正在使用jQuery开发一个计算器,在这里可以有不同数量的用户和位置。所以我有两个下拉列表,你可以选择你的用户数量和地点数量。

您可以在3个软件包中选择:go、pro和expert。我下面的例子是围棋包。

130欧元 . 这包括 1用户 和 1地点 .

以下是我的两个下拉列表:

<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>

一个额外用户=15欧元
一个额外位置=75欧元

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

当你把地点的数量改为3时,新的总价将是130+(15*2)+(75*3)=385

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);
    });

});

1 回复 | 直到 7 年前

ADyson 7 年前

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

//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);
}

推荐文章