javascript - 条件语句只对滑块的初始值做出反应

Question

我的页面上有一个滑块（带范围），我希望图像根据用户设置的范围出现或消失。我在代码末尾使用条件语句执行此操作。条件语句对滑块的初始值 [1500,1600] 做出正确反应，但对用户移动滑块没有反应，因此会更改值。

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 300,
        max: 3000,
        values: [ 1500, 1600 ],
        step: 10,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });

    $( "#amount" ).val(
        "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 )
    );

    var handlevalues = ( $("#slider-range").slider('values') );

    var dot0001 = { price: 1300 }


    if (handlevalues[0] > dot0001.price) {
        $("#dot0001").css("visibility", "hidden")
    } else {
        $("#dot0001").css("visibility", "visible")
    }
});

Answer 1

将相同的条件语句添加到您的slide函数中：

slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

    var dot0001 = { price: 1300 };
    if (handlevalues[0]>dot0001.price){
        $("#dot0001").css("visibility", "hidden");
    } else{
        $("#dot0001").css("visibility", "visible");
    }

}

为避免重复代码，您可以将该语句放在单独的函数中，并从两个位置调用它。