Доступ к значениям ползунка

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>