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

Question

我一直在寻找解决我的问题，但没有运气，但在线。我希望有人能够通过我碰到的这个障碍，或者指引我朝着正确的方向前进。

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

到目前为止，所有工作似乎都正常。

我现在的问题是，我似乎无法瞄准每个价格的价值，以创建一个函数，将总价格加起来。从我的PHP文件中获取

HTML部分：从我的PHP文件中获取

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

部分，其中我从数据库中抓取部门名称和价格：

<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

我觉得发生了什么是行（和它的代码）：

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

实际上从来不被调用，或者它没有在合适的时间调用。

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

你的函数看起来是这样的：

function calcFee() { 
    var total = 0; 

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

Answer 2

您已经完成了一项很好的工作，并且已经通过给每个人一个“费用”级别来简化它，但是我假设您想要解析数字而不是parseInt（如果费用中有美分？ ）。

此外，您需要检查它是否是（不是数字）isNaN，否则它将无法正常工作。 那就是把简单的事情：

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

最后，看来，你做它的“改变”事件。我在keyup事件上运气更好。

Answer 3

如果你是做了jQuery each()功能循环内的计算，那么你可以使用jQuery的$(this).val()抓住每个盒子内的值。然后你可以创建一个累计总数。