Question

我需要根据#calcTotal输入的变化重新计算计算器。我已设法计算所有字段，并在更改其前一个值时重新计算#cwac字段。我很欣赏一些见解

HTML：

<div class="calcContainer">

    <div class="calcTitleWrap">
        <h2>some title here</h2>
    </div>
    <p class="CalcText">some text here</p>
    <div class="calcWraper">
        <form action="#" id="myCalculator">

            <div class="calcCustomers">
                <input type="text" placeholder="TOTAL # OF &#10;CUSTOMERS" id="toc" class="txtCal">
                <span id="calaMinus" class="calcSign">-</span>
                <div id="calcHelpBox"><span>this is some help text</span>
                    <span class="calcArrowDown"></span>
                </div>
                <input type="text" placeholder="# OF CUSTOMERS BOUND BY CONTRACT" id="noc" class="txtCal">
                <a href="#" id="calcHelp"><span>?</span></a>

                <span id="calcResult" class="calcSign">=</span>
                <input type="text" placeholder="# OF CHURNABLE CUSTOMERS" id="calcTotal">
                <div class="calcDivision">
                    <span id="calcDivide" class="calcSign">/</span>
                </div>
                <div class="calDivisionResult">
                    <input type="text" placeholder="# OF CUSTOMERS WHO &#10; ACTUALLY CHURNED" id="cwac">
                </div>
            </div>

            <hr class="divider">
            <div class="calcResultWrapper">
                <div class="calcResults realChurnRate">
                    <span>TOTAL # OF CUSTOMERS %</span>&nbsp;
                    <input type="text" id="rcr">
                </div>
                <div class="calcResults realChurnRate">
                    <span>TOTAL # OF CUSTOMERS %</span>&nbsp;
                    <input type="text" id="scr">
                </div>
            </div>
        </form>
    </div>
</div>

这是JS：

$(document).ready(function () {

$.wait = function (callback, seconds) {
        return window.setTimeout(callback, seconds * 1000);
    }
    //1st calculation
$('#noc').on('keyup', function () {

    num1 = parseInt($('#toc').val());
    num2 = parseInt($('#noc').val());
    // check that there is no NaN
    if (!isNaN(num1) && !isNaN(num1)) {
        total = num1 - num2;
        $.wait(function () {
            $($('#calcTotal').val(total)).show()
        }, 1);
        toc = num1;
        return toc;
        return total;
    }

});

//2nd calculation
$('#cwac').on('keyup', function () {
    if (total) {
        num1 = parseFloat(total);
        num2 = parseFloat($('#cwac').val());
        if (!isNaN(num1) && !isNaN(num2)) {
            devide = ((num2 * 100) / num1);

            $.wait(function () {
                $($('#rcr').val(function () {
                    return parseFloat(devide).toFixed(0) + '%';
                })).show()
            }, 1);
            cwac = num2;
            return cwac;
        }
    }
});
//3rd calculation
$('#cwac').on('keyup', function () {
    if (toc) {
        if (!isNaN(cwac)) {
            num1 = parseFloat(toc);
            num2 = parseFloat(cwac);

            if (!isNaN(num1) && !isNaN(num2)) {
                devide2 = (num2 / num1) * 100;

                $.wait(function () {
                    $($('#scr').val(function () {
                        return parseFloat(devide2).toFixed(0) + '%';
                    })).show();
                }, 1);
            }
        }
    }
});

}）;

这是codpen

Answer 1

我认为你需要为#toc多一个onkeyup函数，为#calcTotal

再添一个

      $('#toc').on('keyup', function() {

        num1 = parseInt($('#toc').val());
        num2 = parseInt($('#noc').val());
        // check that there is no NaN
        if (!isNaN(num1) && !isNaN(num1)) {
          total = num1 - num2;
          $.wait(function() {
            $($('#calcTotal').val(total)).show()
          }, 1);
          toc = num1;
          return toc;
          return total;
        }

      });

codepen url供参考 - http://codepen.io/nagasai/pen/vKOMYg

现在，如果您更改四个字段中的任何一个，您将获得更新的百分比值。

希望这对你有帮助。

Jquery重新计算输入变化

1 个答案: