现金面额计算器

Question

我已经在jquery中创建了现金面额计算器，并且一旦添加了条目，它就会正常工作，但假设您尝试更改这些条目，那么它不会像我预期的那样计算值。

只需填写这些值，即可获得全部的值，但如果尝试使用'.mul_by'类更改div内输入框的值[即。 '='符号前的小输入框]，那么它不能正确计算总数。

这里是jsFiddle为相同。

$('.mul_by').each(function (i) { 
 
    var _this = $(this), 
 
     //set default input value to zero inside .mul-by div 
 
     setZero = _this.find('.form-control').val(0), 
 
     //set default input value to zero inside .mul-val div 
 
     setDenominationVal = _this.siblings('.mul_val').find('.form-control').val(0), 
 

 
     //set default input value to zero inside .total div 
 
     setTotalVal = $('.total').val(0); 
 
    setZero.on('change', function() { 
 
     //watch and store input val. inside .mul_by 
 
     var getUpdatedVal = _this.find('.form-control').val(), 
 
      //get label text 
 
      getDenominationVal = parseInt(_this.siblings('label').text()), 
 
      //update mul_by div after multiplication 
 
      updateDenominationVal = _this.siblings('.mul_val').find('.form-control'); 
 

 
     if (getUpdatedVal > 0) { 
 
      var vals = updateDenominationVal.val(getUpdatedVal * getDenominationVal); 
 
      total = parseInt(setTotalVal.val()) + parseInt(vals.val()); 
 
      setTotalVal.val(total); 
 
     } else { 
 
      updateDenominationVal.val(0); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
     <label class="control-label col-md-2 col-xs-2" for="batch">2000</label> 
 
     <div class="col-md-1 col-xs-4 mul_by"> 
 
      <span>x </span>&nbsp;<input type="text" class="form-control"> 
 
     </div> 
 
     <div class="col-md-3 col-xs-5 mul_val"> 
 
      <span style="font-size: 18px;">= </span>&nbsp;<input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-md-2 col-xs-2" for="batch">500</label> 
 
     <div class="col-md-1 col-xs-4 mul_by"> 
 
      <span>x </span>&nbsp;<input type="text" class="form-control"> 
 
     </div> 
 
     <div class="col-md-3 col-xs-5 mul_val"> 
 
      <span style="font-size: 18px;">= </span>&nbsp;<input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-md-2 col-xs-2" for="batch">100</label> 
 
     <div class="col-md-1 col-xs-4 mul_by"> 
 
      <span>x </span>&nbsp;<input type="text" class="form-control"> 
 
     </div> 
 
     <div class="col-md-3 col-xs-5 mul_val"> 
 
      <span style="font-size: 18px;">= </span>&nbsp;<input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <hr> 
 
     <label class="control-label col-md-2 col-xs-2" for="batch">total:</label> 
 
     <div class="col-md-3 col-xs-5 mul_val"> 
 
      <span style="font-size: 18px;">= </span>&nbsp;<input type="text" class="form-control total"> 
 
     </div> 
 
    </div> 
 
</form>

我如何进行更改后更新总？

希望你能理解它。在此先感谢您的帮助。

Answer 1

请检查该代码我得到正确的结果我做了很多，在结束变化的希望你能得到期望的结果： -

$(document).ready(function() { 
    $('.mul_by').each(function (i) { 
     var _this = $(this), 
    //set default input value to zero inside .mul-by div 
      setZero = _this.find('.form-control').val(0), 
    //set default input value to zero inside .mul-val div 
       setDenominationVal = _this.siblings('.mul_val').find('.form-control').val(0); 

    //set default input value to zero inside .total div 
     setTotalVal = $('.total').val(0);  
     setZero.on('change', function() { 
    var getcurrentval = $(this).val(); 
    console.log('getcurrentval',getcurrentval) 
    //watch and store input val. inside .mul_by 
      var getUpdatedVal = _this.find('.form-control').val(), 
     //get label text 
        getDenominationVal = parseInt(_this.siblings('label').text()), 
     //update mul_by div after multiplication 
        updateDenominationVal = _this.siblings('.mul_val').find('.form-control'); 
       console.log(getUpdatedVal,getDenominationVal) 
     var vals = 0,total=0; 
      if(getUpdatedVal > 0){ 

     if(updateDenominationVal.val()>0){ 
      vals = updateDenominationVal.val(getUpdatedVal * getDenominationVal - updateDenominationVal.val()); 

      total = parseInt(setTotalVal.val()) + parseInt(vals.val()) ; 
      updateDenominationVal.val(getUpdatedVal * getDenominationVal); 
      console.log('total',total,'setTotal',setTotalVal.val(),vals.val()); 
     } 
     else{ 
      vals = updateDenominationVal.val(getUpdatedVal * getDenominationVal); 
      updateDenominationVal.val(getUpdatedVal * getDenominationVal); 
      total = parseInt(setTotalVal.val()) + parseInt(vals.val()); 
     } 
     console.log(vals.val()); 


       setTotalVal.val(total); 
      } else{ 
       updateDenominationVal.val(0); 
      } 
     }); 
    }); 
});