现金面额计算器

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);
            }
        });
    });
});