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

Question

我在根据jQuery UI范围滑块的当前步骤显示内容时遇到了问题，例如，在第二步，我只需要显示第二步内容。

http://codepen.io/anon/pen/LNoXqX

HTML：

<span class="becky">first-step</span>
<span class="becky">second-step</span>
<span class="becky">third-step</span>
<span class="becky">fourth-step</span>
<span class="becky">fifth-step</span>

<div id="slider-2"></div>

 <!-- Content that I need show -->
 <span id="first-step-content">first-step-content</span> 
 <span id="second-step-content">econd-step-content</span>
 <span id="third-step-content">third-step-content</span> 
 <span id="fourth-step-content">fourth-step-conten</span>
 <span id="fifth-step-content">fifth-step-content</span>  

代码：

$(function() {
    $( "#slider-2" ).slider({
        min: 4,
        max: 20,
        value: 12,
        step: 4,
        animate:"slow",
        orientation: "horizontal"
    });
 });

Answer 1

首先，您需要一种将滚动值转换为span的方法，使用“第一”、“第二”来实现这一点，就像使用id一样。因此，添加data-属性，即：

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

接下来，听听滑块的.slide事件，它给出了在ui.value中的位置，然后使用它来显示相关的内容：

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

为了简单起见，我更改了min/max/ value /step，这样就有了一个1-1的值和数据步骤。实际上，我假设您使用了min/max/step，这样滚动页就会出现在文本下面--您只需要将ui.value转换为data-step (或者可能对数据步骤使用不同的值)。

Answer 2

我想这就是你想要的：

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