Jquery 范围滑块显示和隐藏 Div

Question

我正在尝试 Show() 和 Hide() Divs ..但这种方式只能向上升级，而不能向后。 这是我正在摆弄的代码。

    body {
        background-color: #6A6A6A;
    }

    html,
    body {
        height: 100%;
    }

    .box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #slider1 {
        position: absolute;
        top: 25px;
        left: 1%;
        height: 6vh;
        width: 175px;
        z-index: 9999;
    }

    .ui-slider .ui-slider-horizontal {
        height: .6em;
    }

    .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 25px !important;
        height: 10vh !important;
        cursor: default;
    }

    .div1,
    .div2,
    .div3,
    .div4,
    .div5 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
    }

    .div1 {
        background-color: #16168f;
    }

    .div2 {
        background-color: #268226;
    }

    .div3 {
        background-color: #ffbb00;
    }

    .div4 {
        background-color: #565656;
    }

    .div5 {
        background-color: #66668f;
    }

<div class="box">
    <div id="slider1"></div>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
</div>

<link rel="stylesheet" href="https://tim-school.com/codepen/jquery-slider/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>
    $(function () {
        $("#slider1").slider({
            range: "min",
            min: 0,
            max: 5,
            value: 0,
            slide: function (event, ui) {
                $(".div" + ui.value).show();
                $(".div" + ui.value - 1).hide();
            }
        });
    });
</script>

我尝试使用范围滑块更改 Div 并隐藏任何其他 Div 我尝试了 ui.value minus 1 Hide() 但它不起作用。所以我的问题是如何使用范围滑块向前和向后更改 DIV？

Answer 1

@廷巴克托：- 只需对代码进行微小的更改，您就可以轻松实现您的预期结果：

向 html DIV 添加一个公共类，如下所示：

<div class="box">
    <div id="slider1"></div>
    <div class="slider_div div1"></div>
    <div class="slider_div  div2"></div>
    <div class="slider_div div3"></div>
    <div class="slider_div div4"></div>
    <div class="slider_div div5"></div>
</div>

现在更改js脚本，如下所示：

       $("#slider1").slider({
            range: "min",
            min: 0,
            max: 5,
            value: 0,
            slide: function (event, ui) {
                $(".slider_div").hide();   // it will hide any of the active div
                $(".div" + ui.value).show();
                
            }
        });

所以，对于JS脚本，首先隐藏活动/显示的div，然后显示需要显示的div。