使用jQuery動態更新文本字段

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

這應該每個滑塊的值更改