Return jquery-ui 滑块上更改句柄的索引

Question

我有一个 jquery ui 滑块：

$( "#slider" ).slider({
    values: [ 10, 25,45,176 ],
    max: 190,
    change: function( event, ui ) {  
        var index = $("#slider span").index(ui.handle);
        $( "#index" ).text( "That was handle index #" + index );
    }
});

我想return更改后的单句柄的索引。但是句柄对象returns all spans (handles).

我该怎么做？

Answer 1

在 change 事件函数中，ui.handle 是被更改的元素。因此，使用 $(ui.handle).index() 来访问元素的索引。注：索引从零开始。

Example Here

$("#slider").slider({
    values: [ 10, 25,45,176 ],
    max:190,
    change: function( event, ui ) {  
        var index = $(ui.handle).index();
        $("#index").text( "That was handle index #" + index );
    }
});

Answer 2

对于在将 handleIndex 属性 添加到 ui 对象的 March 2015 patch 之后看到此内容的任何人，如果您需要当前句柄的索引，您可以只需使用，例如：

$("#slider").slider({
    values: [10, 25, 45, 176],
    max: 190,
    change: function(event, ui) {  
        var index = ui.handleIndex;
        $("#index").text("That was handle index #" + index);
    }
});