Question

这是html代码：

<form>
<label for="item1">Number 1</label>
<input type="text" id="item1">

<label for="item2">Number 2</label>
<input type="text" id="item2">
</form>

<form>
<input type="text" id="result1" disabled>
<input type="text" id="result2" disabled>
</form>

和jquery：

// calculate: item1 x 50 = write to id "item2"
$('#item1').keyup(function () {
    var foo = parseFloat($(this).val());
    foo = Math.round(foo * 50);
    $('#item2').val(foo);
});

// calculate: item2 / 50 = write to id "item1"
$('#item2').keyup(function () {
    var foo = parseFloat($(this).val());
    foo = Math.round(foo / 50);
    $('#item1').val(foo);
});

// calculate: item1 * 13.99 = write to id "result1"
$('#item1').keyup(function () {
    var foo = parseFloat($(this).val());
    foo = Math.round(foo * 13.99);
    $('#result1').val(foo);
});
// calculate: item1 * 15.99 = write to id "result2"
$('#item1').keyup(function () {
    var foo = parseFloat($(this).val());
    foo = Math.round(foo * 15.99);
    $('#result2').val(foo);
});

// calculate: item1 * 18.99 = write to id "result3"
// calculate: item1 * 25.99 = write to id "result4"
// ....

jsfiddle.net/ra7d4f59/

上的示例

输入id的item1和item2相互计算（* 50或/ 50）。我只输入一个数字来输入“item1”即可得到结果。如何通过使用“item1”键入“item2”中的数字来更新结果？

Answer 1

截至目前，您并未在＃item2上查找更改，这就是为什么它不会更新结果输入。由于您需要更新很多输入，我建议将其拆分为函数。

function updateResults() {
    var input1 = parseFloat($('#item1').val());
    foo = Math.round(input1 * 13.99);
    $('#result1').val(foo);
    // Similarly, 
    // calculate: item1 * 15.99 = write to id "result2"
    // calculate: item1 * 18.99 = write to id "result3"
    // calculate: item1 * 25.99 = write to id "result4"
}
// calculate: item1 x 50 = write to id "item2"
$('#item1').keyup(function () {
    var foo = parseFloat($(this).val());
    foo = Math.round(foo * 50);
    $('#item2').val(foo);
    updateResults();
});

// calculate: item2 / 50 = write to id "item1"
$('#item2').keyup(function () {
    var foo = parseFloat($(this).val());
    foo = Math.round(foo / 50);
    $('#item1').val(foo);
    updateResults();     
});

希望这有帮助！

JSfiddle - http://jsfiddle.net/d7vL2xyv/

Answer 2

我想我终于得到了你想做的事。

基本上，您可以将代码缩减到function来计算结果，另外一个用来处理keyup上的event inputs：

$(function () {
    function calculate() {
        var el = $(this);
        var el1 = $('#item1');
        var el2 = $('#item2');
        var val1 = parseFloat(el1.val());
        var val2 = parseFloat(el2.val());

        if (el.attr('id') == el1.attr('id')) {
            val2 = Math.round(val1 * 50);
            el2.val(val2);
        }
        else {
            val1 = Math.round(val2 / 50);
            el1.val(val1);
        }

        $('#result1').val(Math.round(val1 * 13.99));
        $('#result2').val(Math.round(val1 * 15.99));
    }

    $('#item1, #item2').on('keyup', calculate);
});

Demo

改变键盘上的输入值（2个输入）

2 个答案: