javascript - 使用 jQuery 动态更新文本字段

Question

这是我第一次尝试使用 jQuery。我正在尝试实现一个基本的财务计算器。

我正在使用 jQuery UI 范围 slider 。这些的脚本如下:

jQuery( document ).ready(function( $ ) {
    $( "#slider-deposit" ).slider({
      value: 100,
      min: <?php echo json_encode($minDeposit); ?>,
      max: <?php echo json_encode($maxDeposit); ?>,
      step: 1,
      slide: function( event, ui ) {
        $( "#amount-deposit" ).val( "" + ui.value );
      }
    });
    $( "#amount-deposit" ).val( "" + $( "#slider-deposit" ).slider( "value" ) );
  });  

    jQuery( document ).ready(function( $ ) {
        $( "#slider-payback" ).slider({
      value:100,
      min: 12,
      max: 36,
      step: 12,
      slide: function( event, ui ) {
        $( "#payback-period" ).val( "" + ui.value );
      }
    });
    $( "#payback-period" ).val( "" + $( "#slider-payback" ).slider( "value" ) );
  });  

页面上还有几个文本字段，我尝试随着页面上范围 slider 的值发生变化而动态更新这些文本字段。

这是一个文本字段的例子:

<input type="text" id="monthly-repayments" readonly style="border:0; color:#f6931f;"> 

向这些文本字段添加值并随着 slider 值的变化动态更改它的最佳方法是什么？

谢谢

这是完整的 html:

  <div>
    <label for="amount-depoist">Deposit amount:</label>
    <input type="text" id="amount-deposit" readonly style="border:0; color:#f6931f;">
    <div id="slider-deposit"></div>
</div>

<div>
  <label for="payback-period">Payback Period:</label>
  <input type="text" id="payback-period" readonly style="border:0; color:#f6931f;">
<div id="slider-payback"></div>
<div>

<div>
    <label for="apr_rate">APR:</label>
    <input type="text" id="apr_rate" readonly style="border:0; color:#f6931f;">
</div>

<div>
    <label for="monthly-repayments">Monthly Payments:</label>
    <input type="text" id="monthly-repayments" readonly style="border:0; color:#f6931f;">
</div>

<div>
    <label for="total_payable">Total Payable:</label>
    <input type="text" id="total_payable" readonly style="border:0; color:#f6931f;">
</div>
</div>

Answer 1

在幻灯片事件更改函数中添加一个额外的函数，以便它更新输入字段的值 - 即如下所示:

更改:

  slide: function( event, ui ) {
    $( "#payback-period" ).val( "" + ui.value );
  }

到

  slide: function( event, ui ) {
    $( "#payback-period" ).val( "" + ui.value );
    $('#monthly-repayments').val( "" + ui.value );
  }

每次 slider 值发生变化时，#monthly-repaids 输入表单的值都会更新