访问滑块值

Accessing slider values

本文关键字：访问      更新时间：2023-09-26

我更精通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/

感谢你的帮助，谢谢。

调用一个函数，该函数访问其他值并将它们相加。当然，你可以把这些都拆分到一个服务中，缓存元素等，但你明白了。

$( 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>

相关文章：