Изменение значения входного сигнала на 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/ra7d4f59/

Входной id's элемент1 и item2 рассчитываются друг против друга (* 50 или/50). Я получаю результаты только путем ввода числа для ввода «item1». как я могу обновить результаты, введя число в «item2», используя «item1»?

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 для вычисления результатов, и еще один, чтобы справиться с keyupevent на обоих 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