Jquery UI滑块定位下一个数组时，单击轨道

jquery ui slider locate next array when clicked on the track

本文关键字：单击 轨道 数组 下一个 UI 定位 Jquery      更新时间：2023-09-26

我有一个数组

valmap = [5,4,3,2,1,0,1,2,3,4,5];

现在，例如滑块的手柄在轨道数组[5]上，它是0，手柄在轨道的中心。当我点击轨道数组[0](5)时，手柄应该只移动到轨道数组[4](1)，而不是直接移动到轨道数组[0]的末端或等于5。

它应该定位最近的数组。例如，句柄位于数组[5]的中心，其值为0。当点击左边的轨道时，它应该找到最近的数组，应该是数组[4]，它的值为1。

当我点击轨道时，现在我将点击轨道的右侧手柄应该会移回数组[5]也就是滑动条的中心它等于0

我该怎么做呢?

下面是我的代码:

$(document).ready(function() {
    var valMap = [5,4,3,2,1,0,1,2,3,4,5]; //0 is the default camera zoom
    var slider = $( "#slider" ).slider({
      disabled: false,
      animate: true,
      min: 0,
      max: valMap.length-1,
      values: [5],
      slide: function( event, ui ) {
        $( "#zomlevel" ).val(valMap[ui.values[0]] + "x");
        slider.slider("option", "animate", "slow");        
      }
    });
});

这是一个jsfiddle: http://jsfiddle.net/endl3ss/jNwww/

编辑添加说明:

例如，我单击轨道的左侧，手柄在中心，手柄不应该直接跳到我点击鼠标的轨道左侧，它应该寻找下一个数组并移动到那里，而不是跳到数组的末尾。

看看这个…终于明白了…

希望这是你正在寻找的…

$(function() {
    var prevValue=100;
    $( "#slider" ).slider({
        value:100,
        min: 0,
        max: 500,
        step: 50,
        slide: function( event, ui ) {
            if (prevValue>ui.value){
                ui.value= prevValue-50;
            }else{
                ui.value= prevValue+50;
            }
            prevValue=ui.value;
            $( "#amount" ).val( "$" + ui.value );
            $( "#slider" ).slider( "option", "value", prevValue );
            $('#slider').trigger(e);
            }
    });

    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
相关文章：