jQuery 中的公式计算器

Question

我正在尝试完成一个计算器，它根据输入计算值，反之亦然。

当我想计算PPM时，我需要MGM3和Mol
当我想计算 MGM3 时，我需要 PPM 和 Mol

现在，问题是它无法正常工作。我对这种计算还是陌生的。我希望有人能帮我解决这个问题。

以上固定
更新：只有在 firefox 中，在点后面使用 3 个数字时才会出现错误。例如填写：
• 摩尔: 30
• Mg/m3: 0,15
完成后给mg/m3补上几个数，结果无效。我该如何解决这个问题？

// formula for ppm =    mg/m3 * 24.45 / mol
// formula for mg/m3 =  ppm * mol / 24.45
 
 
 $('input.value').keyup(function(){
    var ppm = $('#ppm');
    var mgm3 = $('#mgm3');
    var mol = $('#mol');

    if( $('#ppm').val() != '') {
        $('#mgm3').attr('disabled', true);

        $(this).calculateMGM3;
    } else {
        $('#mgm3').attr('disabled', false);
    }

    if( $('#mgm3').val() != '') {
        $('#ppm').attr('disabled', true);

        $(this).calculatePPM; 
    } else {
        $('#ppm').attr('disabled', false);
    }

    function calculateMGM3() {
        var mol = $('#mol').val();
        var ppm = $('#ppm').val();
        var calcMGM3 = (( ppm * mol ) / 24.45 );
        $mgm3.val( calcMGM3 );
    }

    function calculatePPM() {
        var mol = $('#mol').val();
        var mgm3 = $('#mgm3').val();
        var calcPPM = (( mgm3 * 24.45 ) / mol );
        $ppm.val( calcPPM );
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="calc">
    <h1>MG/M³ - PPM Calculator</h1>
    <div class="gfield">
        <label>PPM</label>
        <input class="value" type="number" name="ppm" id="ppm">
    </div>
    <div class="gfield">
        <label>MG/M³</label>
        <input class="value" type="number" name="mgm3" id="mgm3">
    </div>
    <div class="gfield">
        <label>Molmassa</label>
        <input class="value" type="number" name="mol" id="mol">
    </div>
</form>

Answer 1

我修正了你代码中的一些错误

calculateXX 函数在事件处理程序中 - 不需要，移到外面
调用方法时需要括号，所以将 $(this).calculatePPM 更改为简单的 calculatePPM()（不知道为什么前面有 $(this)。
已将 parseFloat 添加到您从文本字段中读取数值的位置。
您使用了 $ppm 之类的别名变量，但这些变量并未在任何地方声明。不继续使用 jQuery 选择器并在变量中缓存对字段的引用实际上是一种很好的做法。但为了保持最小的变化，我没有这样做。不过我建议你这样做。

// formula for ppm =    mg/m3 * 24.45 / mol
// formula for mg/m3 =  ppm * mol / 24.45
 
 
 $('input.value').keyup(function(){
    var ppm = $('#ppm');
    var mgm3 = $('#mgm3');
    var mol = $('#mol');

    if( $('#ppm').val() != '') {
        $('#mgm3').attr('disabled', true);

        calculateMGM3();
    } else {
        $('#mgm3').attr('disabled', false);
    }

    if( $('#mgm3').val() != '') {
        $('#ppm').attr('disabled', true);

        calculatePPM(); 
    } else {
        $('#ppm').attr('disabled', false);
    }
});



function calculateMGM3() {
    var mol = parseFloat($('#mol').val());
    var ppm = parseFloat($('#ppm').val());
    var calcMGM3 = (( ppm * mol ) / 24.45 );
    $('#mgm3').val( calcMGM3 );
}

function calculatePPM() {
    var mol = parseFloat($('#mol').val());
    var mgm3 = parseFloat($('#mgm3').val());
    var calcPPM = (( mgm3 * 24.45 ) / mol );
    $('#ppm').val( calcPPM );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="calc">
    <h1>MG/M³ - PPM Calculator</h1>
    <div class="gfield">
        <label>PPM</label>
        <input class="value" type="number" name="ppm" id="ppm">
    </div>
    <div class="gfield">
        <label>MG/M³</label>
        <input class="value" type="number" name="mgm3" id="mgm3">
    </div>
    <div class="gfield">
        <label>Molmassa</label>
        <input class="value" type="number" name="mol" id="mol">
    </div>
</form>

Answer 2

可能不是最有效的方法，但这是我完成的。现在它看起来很有魅力。

jQuery(document).ready(function($) {
    $('input#ppm').keyup(function(){
        if( $('#ppm').val() != '') {
            $('#mgm3').attr('disabled', true);
            calculateMGM3();
        } else {
            $('#mgm3').attr('disabled', false);
        }
    });

    $('input#mgm3').keyup(function(){
        if( $('#mgm3').val() != '') {
            $('#ppm').attr('disabled', true);
            calculatePPM(); 
        } else {
            $('#ppm').attr('disabled', false);
        }
    });

    $('input#mol').keyup(function(){
        if( $('#mgm3').prop('disabled') ) {
            calculateMGM3();
        }
        if( $('#ppm').prop('disabled') ) {
            calculatePPM();
        }   
    });

    function calculateMGM3() {
        var mol = parseFloat($('#mol').val());
        var ppm = parseFloat($('#ppm').val());
        var calcMGM3 = parseFloat(( ppm * mol ) / 24.45 ).toFixed(2);
        $('#mgm3').val( calcMGM3 );
    }

    function calculatePPM() {
        var mol = parseFloat($('#mol').val());
        var mgm3 = parseFloat($('#mgm3').val());
        var calcPPM = parseFloat(( mgm3 * 24.45 ) / mol ).toFixed(2);
        $('#ppm').val( calcPPM );
    }
});

jQuery 中的公式计算器

Formula calculator in jQuery

jquery

formula