Question

我在基于jQuery UI范围滑块的当前步骤显示内容时出现问题，例如第二步我只需要显示第二步内容

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

首先，您需要一种方法将滚动值转换为范围，使用“first”，“second”使这很困难，就像使用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;
...

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

2 个答案: