javascript - 现金面额计算器

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