jQuery Range Slider实现Div双向显示隐藏的问题

嘿，我明白你遇到的问题啦——现在的滑块只能在往前滑的时候正常切换div，往回滑就失效了对吧？这是因为你当前的逻辑只考虑了“隐藏上一个div”，但没处理向后滑动时需要隐藏后面的div，而且还存在一个字符串拼接的小bug。

问题出在哪？ #

1. 字符串拼接优先级错误：$(".div" + ui.value - 1)的执行顺序有问题——JavaScript会先把".div"和ui.value拼成字符串（比如".div2"），再用这个字符串去减1，结果会变成NaN，根本选不到任何元素，所以隐藏操作等于白做。
2. 逻辑覆盖不全：只隐藏“前一个”div的话，当滑块从3滑到1时，div2、div3都会留在页面上，这显然不是你想要的“只显示当前滑块对应div”的效果。

解决办法：统一隐藏再显示 #

最稳妥的思路是：每次滑块滑动时，先把所有需要切换的div都隐藏，再只显示当前滑块值对应的那一个。这样不管滑块往前还是往后滑，都能保证页面上只有目标div是显示状态。

修正后的完整代码

JavaScript

$(function() {
  $("#slider1").slider({
    range: "min",
    min: 1,  // 改成1，对应你的div1-div5，避免0值无对应div
    max: 5,
    value: 1, // 默认显示第一个div
    slide: function(event, ui) {
      // 先隐藏所有切换用的div（用共同类名更精准）
      $(".slide-div").hide();
      // 再显示当前滑块值对应的div
      $(".div" + ui.value).show();
    }
  });
  
  // 页面加载完成后，初始化显示第一个div
  $(".slide-div").hide();
  $(".div1").show();
});

CSS（保留原有样式，新增共同类优化选择器）

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

/* 给所有切换div加共同类，方便精准选择 */
.slide-div {
  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;
}

HTML（给每个切换div加共同类slide-div）

<div class="box">
  <div id="slider1"></div>
  <div class="div1 slide-div"></div>
  <div class="div2 slide-div"></div>
  <div class="div3 slide-div"></div>
  <div class="div4 slide-div"></div>
  <div class="div5 slide-div"></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>

额外优化提示 #

• 我给所有需要切换的div加了一个共同的class slide-div，这样用$(".slide-div")选择元素会比[class^='div']更精准，避免误选页面上其他带div前缀的元素。
• 把滑块的min和默认value改成1，因为你的div是从div1开始的，原来的0值找不到对应的div，会导致页面初始时没有任何div显示。

这样修改后，不管你把滑块往前拉还是往后拉，都只会显示当前值对应的那个div啦！

备注：内容来源于stack exchange，提问作者Timbukto