Question

这是我第一次尝试使用jQuery。我正在尝试实施一个基本的金融计算器。

我正在使用jQuery UI范围滑块。这些脚本如下：

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" ) );
  });

我在页面上也有几个文本字段，我正在尝试动态更新这些文本字段，因为范围滑块的值在页面上发生了变化。

这是一个文本字段，例如：

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

为这些文字字段添加值并在幻灯片的值更改时动态更改它的最佳方法是什么？

由于

这是完整的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 );
  }

每次滑块的值更改时，这应该更新#monthly-repayments输入表单的值

使用jQuery

1 个答案: