javascript - jQuery Mobile slider 捕捉？

Question

过去的 2 个小时里，我一直在尝试来自不同来源的随机代码，这些代码声称他们已经设法将 slider 捕捉到特定点。我不确定这对于 jQuery Mobile 库是否可行，因为 jQuery UI 版本确实支持它，但我真的需要为当前项目想出一些办法。

本质上，我有一个包含不同日期的时间表。它们不是“步”，例如 10 或 20，它们是不同的数字。像 1、3、10、12、32 这样的数字。我需要 slider 来捕捉这些点。

目前，我有一些东西只测试步骤属性。

$('#slider-1').live( "change", function(e) {
    var step = $(this).attr('step'),
        val = $(this).val();
    if(step % val == step || val == step){
        console.log(val)
    }
});

我在使用 slider 时遇到的问题，不仅是对齐问题，还在于当我滑动到接近 20、40 或 60 等的任何位置时，我会收到控制台日志。它没有登录 20 等。

Answer 1

在多次迭代代码并阅读我可以绑定(bind)的特定事件的文档后弄明白了。

所以基本上我的数组中有一个数字时间轴，看起来像这样:

-0--10--20-----70--100---150---200---250---300---350---400-----500 --------------1000

我需要根据 slider handle 的位置捕捉​​到最接近的数字。我通过测试 slider 相对于数组中最接近的数字移动时的当前值来做到这一点。然后我会动态更改 slider 值，然后必须强制刷新 slider 才能看到更改。

$(function() {

    /*  
    Array of values between 0 - 1000 (can be any set of numbers you want to snap to, 
    but you must make sure the 'max' attribute on the input element is <= the last 
    value in the array)  
    */
    var values = [0, 10, 20, 70, 100, 150, 200, 250, 300, 350, 400, 500, 1000],

        /*
        A way for us to check the current and previous values of the slider so we only 
        call doSomething() if these are different. This way the function isn't called twice. These should NOT have the same values on init.
        */
        currentVal = 0,
        prevVal = null,

        // Assign our slider to a variable so we're not hitting the dom repeatedly. 
        $slider = $("#slider-1");

    /*
    After each change of our input value, we assign the slider value to the nearest number
    in our array for our "snap" effect
    */
    $($slider).bind("change", function(){
        $($slider).val(findNearest($($slider).val()))
    });

    /*
    We must capture click events on the slider itself if the user doesn't drag the handle.
    */
    $(".ui-slider[role=application]").bind("vclick",function(){
        $($slider).slider('refresh');
    })

    /*
    jQuery creates new dom elements for us, which in the case of the handle, is an anchor element. 
    Use mouseup method to test on the computer, otherwise touchend method for mobile devices.
    */
    $("a.ui-slider-handle").touchend(function(){
        // If our currentVal hasn't changed after a snap action, do nothing, otherwise call doSomething()
        if(currentVal != prevVal) {
            prevVal = currentVal;
            doSomething();
        }

        // Force slider refresh for visible snap effect
        $($slider).slider('refresh');
    })

    // Used to iterate over our array and check for nearest value to what is passed in
    function findNearest(goal) {
        var closest = null;
        $.each(values, function(){
          if (closest == null || Math.abs(this - goal) < Math.abs(closest - goal)) {
            closest = this;
          }
        });
        return currentVal = Number(closest);
    }

    function doSomething(){
        ... 
    }
});

还有我的 HTML:

<label for="slider-1" id="slider_label_1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="0" min="0" max="1000" step="10" />