Jquery Ui范围滑块内容在步骤上显示

我在基于jQueryUI范围滑块的当前步骤显示内容时遇到问题，例如，在第二步中，我只需要显示第二步内容

HTML:

---

首先，您需要一种将滚动值转换为范围的方法，使用“First”、“second”会让这变得很困难，使用

id

也很困难。因此，添加

数据-

属性，即：

    <div id="slider-2"></div>
       <span data-step='1'>first-step-content</span> 
       <span data-step='2'>second-step-content</span>
       <span data-step='3'>third-step-content</span> 
       <span data-step='4'>fourth-step-conten</span>
       <span data-step='5'>fifth-step-content</span>  
    </div>

---

为简单起见，我更改了min/max/value/step，因此值和数据步长为1-1。在实践中，我假设您使用了min/max/step，以便滚动显示在文本下-您只需将

ui.value

转换为

data step

（或者可能对data step使用不同的值）。

我想这就是您要寻找的：

var val = $('#slider-2').slider("value");
if (val == 8){
   //show second-step content
}

此外，如果您有多个要显示/隐藏的值：

switch (val){
  case 8:
   //second-step
   break;
  case 12:
   //third-step
  break;
...

---

爱你：D我找了很久了谢谢

$("#slider-2").slider({
    min: 1,
    max: 5,
    value: 1,
    step: 1,
    animate:"slow",
    orientation: "horizontal",
    slide: function( event, ui ) {
        // Convert value to index
        $("span[data-step]").hide()
        $("span[data-step='" + ui.value + "']").show()
    }
});

var val = $('#slider-2').slider("value");
if (val == 8){
   //show second-step content
}

switch (val){
  case 8:
   //second-step
   break;
  case 12:
   //third-step
  break;
...