jQueryを使用した各変更の入力の合計

Question

私は以下のコードを持ち、変更ごとに価格を合計する可能性を持っています。

<table class="table table-striped table-bordered listItem"> 
    <tbody> 
    <tr> 
     <th width="20%">Quantity</th> 
     <th width="50%">Item</th> 
     <th width="20%">Price ($)</th> 
     <th width="10%"></th> 
    </tr> 
    <tr> 
     <td> 
      <select class="form-control BIL_item_quantity" name="BIL_Daily_Charge[BIL_item_quantity][]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option> 
      </select> 
     </td> 
     <td> 
      <select class="form-control BIL_item_id" name="BIL_Daily_Charge[BIL_item_id][]"> 
       <option value="">Select an item</option><option value="27" data-item-rate="6.00" data-item-taxes="4">Hot-Dog</option> 
      </select> 
     </td> 
     <td> 
      <input type="text" class="form-control BIL_item_rate" name="BIL_Daily_Charge[BIL_item_rate][]"> 
     </td> 
     <td> 
      <button type="button" class="btn btn-default removeItem"><i class="fa fa-times"></i></button> 
     </td> 
    </tr> 
    </tbody> 
</table> 

完全なコードはここにある：私が試したhttps://jsfiddle.net/8ue9wtbe/

ザ・jsのコードは以下の通りです：

$("select[name='BIL_Daily_Charge[BIL_item_quantity][]'], select[name='BIL_Daily_Charge[BIL_item_id][]']").on('propertychange change click keyup input paste', function() { 
    var currSum = 0; 
    var totalSum = 0; 
    $("input[name='BIL_Daily_Charge[BIL_item_quantity][]']").each(function(){ 
     if($(this).val()=='') { currSum = 0; } 
     else { currSum = parseFloat($(this).val()); } 
     totalSum = currSum + totalSum; 
    }); 
    $("#total_cost_extras").text(Math.round(totalSum * 100)/100); 
}); 

は、私が何かを欠場か？

ありがとうございました。

Answer 1

お楽しみください。 =）

function handleValueSelection($el) { 
 
    if($el.is('.bill-control-name')) { 
 
    \t return $el.find(':selected').data('itemRate'); 
 
    } else { 
 
    \t return $el.val(); 
 
    } 
 
} 
 

 
function checkForNaN(value) { 
 
\t return (isNaN(value)) ? 0 : value; 
 
} 
 

 
function updateTotal() { 
 
\t var total = 0; 
 
\t 
 
    $('.bill-item-total').each(function() { 
 
    \t var itemTotal = parseInt($(this).val()); 
 
    itemTotal = checkForNaN(itemTotal); 
 
    \t total += itemTotal; 
 
    }); 
 
    
 
    $('#bill-total').text(total); 
 
} 
 

 
$(document).on('change', '.bill-control', function(){ 
 
\t var $self = $(this); 
 
    
 
    var selfValue = handleValueSelection($self); 
 
    var pairValue = handleValueSelection($($self.data('pair'))); 
 
    var $totalEl = $($self.data('total')); 
 
    var itemTotal = selfValue * pairValue; 
 
    
 
    itemTotal = checkForNaN(itemTotal); 
 
    
 
    $totalEl.val(itemTotal); 
 
    
 
\t updateTotal(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped table-bordered listItem"> 
 
    <tbody> 
 
    <tr> 
 
     <th width="20%">Quantity</th> 
 
     <th width="50%">Item</th> 
 
     <th width="20%">Price ($)</th> 
 
     <th width="10%"></th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <select id="item-1-quantity" class="form-control bill-control BIL_item_quantity" data-pair="#item-1-name" data-total="#item-1-total" name="BIL_Daily_Charge[BIL_item_quantity][]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <select id="item-1-name" class="form-control bill-control bill-control-name BIL_item_id" data-pair="#item-1-quantity" data-total="#item-1-total" name="BIL_Daily_Charge[BIL_item_id][]"> 
 
       <option value="">Select an item</option><option value="27" data-item-rate="6.00" data-item-taxes="4">Hot-Dog</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input id="item-1-total" type="text" class="form-control bill-item-total BIL_item_rate" name="BIL_Daily_Charge[BIL_item_rate][]"> 
 
      <input type="hidden" class="form-control BIL_item_taxes" name="BIL_Daily_Charge[BIL_item_taxes][]" value="4"> 
 
      <input type="hidden" class="form-control BIL_item_type" name="BIL_Daily_Charge[BIL_item_type][]" value=""> 
 
     </td> 
 
     <td> 
 
      <button type="button" class="btn btn-default removeItem"><i class="fa fa-times"></i></button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <select id="item-2-quantity" class="form-control bill-control BIL_item_quantity" data-pair="#item-2-name" data-total="#item-2-total" name="BIL_Daily_Charge[BIL_item_quantity][]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <select id="item-2-name" class="form-control bill-control bill-control-name BIL_item_id" data-pair="#item-2-quantity" data-total="#item-2-total" name="BIL_Daily_Charge[BIL_item_id][]"> 
 
       <option value="">Select an item</option><option value="27" data-item-rate="6.00" data-item-taxes="4">Hot-Dog</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input id="item-2-total" type="text" class="form-control bill-item-total BIL_item_rate" name="BIL_Daily_Charge[BIL_item_rate][]"> 
 
      <input type="hidden" class="form-control BIL_item_taxes" name="BIL_Daily_Charge[BIL_item_taxes][]"> 
 
      <input type="hidden" class="form-control BIL_item_type" name="BIL_Daily_Charge[BIL_item_type][]"> 
 
     </td> 
 
     <td> 
 
      <button type="button" class="btn btn-default removeItem"><i class="fa fa-times"></i></button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <h3>Total: <span id="bill-total">0.00</span></h3> 
 
</table>