Question

如何在 Jquery UI 滑块中获取幻灯片上的索引号

2018-08-18

1173

javascript jquery jquery-ui slider

我想获取滑动事件中滑块的索引。这是我的代码。:

$( "#slider" ).slider({
    slide: function(event,ui){
        $('#value').text(ui.index());    
    }
});

Answer 1

您是在寻找 ui.value 属性还是 $(ui.handle).index() 属性？

$( "#slider" ).slider({
    slide: function(event,ui){
        let index = $(ui.handle).index()
        $('#value').text("value: " + ui.value + ", index: " + index);    
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="slider"></div>
<div id="value"></div>

如果给定值集（如 [10, 25, 45, 150] ），整个情况会更有意义：

$("#slider").slider({
  values: [10, 25, 45, 150],
  max: 200,
  change: function(event, ui) {
    var index = $(ui.handle).index();
    $("#value").text("handeled index: " + index);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="slider"></div>
<div id="value"></div>