Question

我一直在网上搜索我的问题的解决方案，但还没有运气。我希望有人能够让我超越这个障碍，或者指向正确的方向。

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

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

我现在的问题是，我似乎无法定位每个价格的价值，以便创建一个函数来累计总价的每个价格。

从我的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>

从我的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文件中获取的Datepicker和总费用代码：

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

你已经完成了一项不错的工作并且通过给每个人一类“费用”来实现它很容易，但是我想你要解析数字，而不是parseInt（如果费用中有分数？）。< / p>

此外，您需要检查它是否是NaN（不是数字），否则它将无法正常工作。这是一个简单的问题：

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

最后，您似乎正在对“更改”事件进行此操作。我对keyup事件运气好了。

Answer 2

我认为正在发生的是行（及其代码）：

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

实际上从未被调用过，或者没有在正确的时间被调用。

我的建议是将.fee内容包装在一个函数中。然后在日期选择器的select回调中调用该函数。（可能在每个break;语句之前。）这样，每次日期更改时都会重新计算总数。

你的功能看起来像这样：

function calcFee () {
  var total = 0;

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

Answer 3

如果你在jQuery each()函数循环中进行计算，那么你可以使用jQuery $(this).val()来获取每个框内的值。然后，您可以创建累计总数。

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

3 个答案: