访问滑块值

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>