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");
    }

}

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

条件语句仅响应滑块的初始值

1 个答案: