jQuery滑块如何根据其他两个div的值更新div？

Question

试图弄清楚这一点。玩了几个小时并搜索但没有成功。

基本上，我的页面上有这 2 个滑块。每张幻灯片都会更新 div 上的文本，在本例中，slider-1-value 和 slider-2-value 是 div。我的目标是根据滑块 1 和 2 上的设置将 div“slider-3-value”更新到一定数量。

我的代码

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 之前没有得到更新。

如果您正确缩进了代码，我想您会注意到这一点。