訪問滑塊值

Question

我更熟悉PHP，但我必須編寫一個使用javascript和jquery ui的貸款計算器。

我有3個滑塊，其中之一，這裏的代碼：

$('#amountSlider').slider({ 
    range: "min", 
    value: 37, 
    min: 1000, 
    max: 20000, 
    slide: function(event, ui){ 
     $("#amount").val("$" + ui.value); 
    } 
}); 
$("#amount").val("$" + $("#amountSlider").slider("value")); 

HTML其中的值輸出：

<input type="text" name="amount" id="amount"><br> 
<input type="text" name="rate" id="rate"><br> 
<input type="text" name="term" id="term"><br> 
<input type="text" name="calcTotal" id="calcTotal"/> 

滑塊做工精細，並顯示在文本框中的值但我似乎無法訪問滑塊外的值，將它們全部添加到total calculation文本框中。

例子：

Slider 1 value : 50 
Slider 2 value: 3 
Slider 3 value: 5.5 

我希望能夠說：calcTotal = slider1.val + slider2.val + slider3.val和值始終更新爲我拖動滑塊。

一個活生生的例子，我發現在網頁計算器：http://blinkfinance.com.au/

感謝您的幫助，謝謝。

Answer 1

調用一個函數，該函數訪問其他值並將它們相加。 當然你可以把它分成一個服務，緩存元素等，但你明白了。

$(function() { 
 
    var output = $('#output'); 
 
    
 
    $("#slider1").slider({ 
 
     slide: function(event, ui) { 
 
      
 
      output.text(getAllValues()); 
 
     } 
 
    }); 
 
    
 
    $("#slider2").slider({ 
 
     slide: function(event, ui) { 
 
      output.text(getAllValues() ); 
 
     } 
 
    }); 
 
    
 
    $("#slider3").slider({ 
 
     slide: function(event, ui) { 
 
      output.text(getAllValues()); 
 
     } 
 
    }); 
 
    
 
    
 
    function getAllValues() { 
 
     return getValue("1") + getValue("2") + getValue("3"); 
 
    } 
 
    
 
    function getValue(id) { 
 
     return $("#slider" + id).slider("value"); 
 
    } 
 
});

@import url(http://fonts.googleapis.com/css?family=Lato:400,700); 
 

 
body { 
 
    background-color: #f0f0f0; 
 
    color: #333; 
 
    font-family: Lato, Helvetica, Arial, sans-serif; 
 
    margin: 25px; 
 
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    
 
    <div id="slider1"></div> 
 
    <br> 
 
    <div id="slider2"></div> 
 
    <br> 
 
    <div id="slider3"></div> 
 

 
<br><br> 
 

 
<div id="output">Drag..</div>