访问滑块值

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>