jQuery slider how to update div dependent on the value of two other divs?

Question

Пытаясь понять это. Я играл с ним несколько часов и искал, но безуспешно.

В основном, у меня есть эти 2 ползунка на моей странице. Каждый слайд обновляет текст в div, в этом случае slider-1-value и slider-2-value являются div ами. Моя цель - обновить div "slider-3-value" до определенной величины, в зависимости от того, что установлено на слайдере 1 и 2.

Мой код

HTML

<div class="mybox">
<div class="pricebox">
    <div class="custom-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-1" aria-disabled="false" style="float: left;"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div>
<br>
    <span style="float: left;">Rooms: <div id="slider-1-value" style="display: inline;">1</div></span>
<br />
<br />
    <div class="custom-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-2" aria-disabled="false" style="float: left;"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 20%;"></a></div>
    <span style="float: left;">Bathrooms: <div id="slider-2-value" style="display: inline;">1</div></span>
    <span style="float: right;">$<div id="slider-3-value" style="display: inline;">50</div><b>/clean</b></span>
</div>
<div id="cleared">
<br />
<p style="text-align: center;"><a class="btn btn--second" href="#">BOOK APPOINTMENT</a></p>
<br />
</div>

JQuery

<script>
$(function() {
//start the sliders
var slider_1 = $( "#slider-1").slider({min: 1, max: 6});
var slider_2 = $( "#slider-2").slider({min: 1, max: 6});

//move other slider depending on the first slider
slider_1.on('slide', function(event, ui) {

    //get the value from the ui
    var value = ui.value;
    $('#slider-1-value').text(value); //update the number beside the slider

    test();

});
    slider_2.on('slide', function(event, ui) {

    //get the value from the ui
    var value2 = ui.value;
    $('#slider-2-value').text(value2)}); // update the number beside the slider 2

    test();

});


function test() {
if ($('#slider-2-value').text() == "5") {

    $('#slider-3-value').text(5);

}
}

</script>

У меня почти получилось, но ползунок 3 div не будет обновляться, если не переместить и не поиграть.

Answer 1

Изменить:

slider_2.on('slide', function(event, ui) {

//get the value from the ui
var value2 = ui.value;
$('#slider-2-value').text(value2)}); // update the number beside the slider 2

test();

чтобы:

slider_2.on('slide', function(event, ui) {
    //get the value from the ui
    var value2 = ui.value;
    $('#slider-2-value').text(value2); // update the number beside the slider 2
    test();
});

DEMO

Призыв к test() не было внутри обработчика для slider_2, Вы сделали это правильно для slider_1вот почему slider-3-value не обновлялся, пока вы не поиграли со слайдером 1.

Если бы вы правильно сделали отступ в своем коде, думаю, вы бы это заметили.