php - 如何使用 jQuery 计算输入字段的总成本？

Question

我一直在网上搜索我的问题的解决方案，但还没有成功。我希望有人能够帮助我克服我遇到的这个障碍，或者为我指明正确的方向。

我正在为玩家创建一个在线注册表。到目前为止，当我使用 jquery 的日期选择器选择出生日期时，它将根据我设置的特定日期返回用户的正确年龄。我正在使用 switch 语句根据所选年龄在网页上显示正确的部门名称和价格值。

到目前为止一切似乎都正常工作。

我现在的问题是，我似乎无法将每个价格的值作为目标，以创建一个将每个价格相加得出总计的函数。

取 self 的 php 文件的 HTML 部分:

<div>
    <div>
        <label for="player-birthdate-1">Birthdate</label>
        <input type="text" class="default-input" id="datepicker1" value="">
    </div>

    <div>
        <label for="player-division-1">Division</label> 
        <input type="text" id="playerDivision1" value="" disabled> 
    </div>

    <div>
        <p id="playerFee1" class="fee" value=""></p>
    </div>
</div>


<div>
    <div>
        <label for="player-birthdate-2">Birthdate</label>
        <input type="text" class="default-input" id="datepicker2" value="">
    </div>

    <div>
        <label for="player-division-2">Division</label> 
        <input type="text" id="playerDivision2" value="" disabled> 
    </div>

    <div>
        <p id="playerFee2" class="fee" value=""></p>
    </div>
</div>

<div>
    <p id="total" value=""></p>
</div>

部分取 self 的 php 文件，其中我从数据库中获取部门名称和价格:

<script>
    var divisions = {
        <?php
    $sql = $db->prepare("SELECT * FROM division");
    $sql->execute();
    $results = $sql->fetchAll(PDO::FETCH_OBJ);

    foreach ($results as $division) :
        ?>

            '<?php echo $division->division_id; ?>' : {
           id : '<?php echo $division->division_id;?>'
          ,name : '<?php echo $division->division_name;?>'
          ,price : '<?php echo $division->division_price;?>' 
            },

        <?php endforeach; ?>
    }
</script>

从我的 js 文件中获取的日期选择器和总费用代码:

$(document).ready(function() {

    $( '#datepicker1' ).datepicker({
onSelect: function(value, ui) {
    var newDate = new Date("April 30, " + (new Date()).getFullYear()),
        dob = $("#datepicker1").datepicker("getDate"),
        age = new Date(newDate - dob).getFullYear() - 1970;
        $('#age').val(age);
        console.log(age);

        switch (age){

            case 5:
            case 6: 
                $("#playerDivision1").val(divisions['1'].name);
                $("#playerFee1").html(divisions['1'].price);
            break;

            case 7:
            case 8: 
                $("#playerDivision1").val(divisions['2'].name);
                $("#playerFee1").html(divisions['2'].price);
            break;

                            //continues on for the remaining of the ages.....

                },                      
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy-mm-dd', 
                yearRange: '1990:2012'


        });


    $( '#datepicker2' ).datepicker({
onSelect: function(value, ui) {
    var newDate = new Date("April 30, " + (new Date()).getFullYear()),
        dob = $("#datepicker1").datepicker("getDate"),
        age = new Date(newDate - dob).getFullYear() - 1970;
        $('#age').val(age);
        console.log(age);

        switch (age){

            case 5:
            case 6: 
                $("#playerDivision2").val(divisions['1'].name);
                $("#playerFee2").html(divisions['1'].price);
            break;

            case 7:
            case 8: 
                $("#playerDivision2").val(divisions['2'].name);
                $("#playerFee2").html(divisions['2'].price);
            break;

                            //continues on for the remaining of the ages.....

                },                      
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy-mm-dd', 
                yearRange: '1990:2012'


        });


    $('.fee').html(function(){

        var total = 0;

        $('.fee').each(function(){

            var fee = parseFloat($(this).val());
                        if (isNaN(fee)) {fee = 0;}
                        total+= fee;

            $('#total').html('$' + total);

        });
    });

});

我期待论坛上的人提供建议。非常感谢任何帮助或插入正确的方向! :)

Answer 1

你做得很好，并且已经通过给每个人一类“费用”让它变得简单，但我假设你想要 parseFloat 数字，而不是 parseInt(以防费用中有美分？)。

此外，您需要检查它是否为 isNaN(不是数字)，否则将无法正常工作。这是一个简单的添加问题:

if (isNaN(fee)) {fee = 0;}

最后，您似乎是在“更改”事件上执行此操作。我在 keyup 事件中运气更好。