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的值？

1 个答案: