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

Question

试图解决这个问题。已经玩了几个小时并搜索但没有成功。

基本上，我的页面上有这两个滑块。每张幻灯片都会更新 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 之前没有得到更新的原因。

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

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

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

javascript

jquery

jquery-ui

jquery-plugins

jquery-ui-slider