更改keyup上的输入值(2个输入)

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/ra7df4f59/上的示例

输入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来计算结果，并将另一个代码简化为在两个inputs:上处理keyupevent

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

演示