如何計算使用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()抓住每個盒子內的值。然後你可以創建一個累計總數。