javascript - jQuery UI Slider change 和 slide 事件报告不同的结果

Question

好的，所以在这里问了一个非常相似的问题

jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value

但我认为答案并不令人满意。这是我的 JavaScript 代码:http://jsfiddle.net/AsDZJ/4/

function slideVal() {
    var number = $("#number_slider").slider("value");
    $("#number_field").append('Slide: ' + number + '<br/>');
}

function changeVal() {
    var number = $("#number_slider").slider("value");
    $("#number_field").append('Change: ' + number + '<br/>');
}

$(function() {
    $( "#number_slider" ).slider({
        min: 1,
        max: 10,
        change: changeVal,
        slide: slideVal
    });

    $( "#number_slider" ).slider( "value", 5 );
});

问题是 slider 在调用 change 处理程序和调用 slide 处理程序之间报告不同的值。

现在，另一个问题指出，如果您匿名声明该函数，您可以简单地使用 ui.value，如下所示:

$( "#number_slider" ).slider({
    min: 1,
    max: 10,
    change: function(event, ui) {
        $("#number_field").append('Change: ' + ui.value + '<br/>');
    }
});

这确实提供了更一致的结果，但也意味着如果像我的情况一样，只要事件发生变化，我就有很多复杂的逻辑要执行，我就必须重复代码。此外，计算涉及来自多个 slider 的 slider 值。

如何从显式声明的函数中获取正确的值？ jQuery UI 中的这种行为是错误吗？

谢谢

Answer 1

您仍然可以使用参数定义全局函数，当您初始化 slider 时只需传入函数名称而不是使用匿名回调

function slideVal(e, ui) {
    var number = ui.value;
    $("#number_field").append('Slide: ' + number + '<br/>');
}

function changeVal(e, ui) {
    var number = ui.value;
    $("#number_field").append('Change: ' + number + '<br/>');
}

$(function() {
    $( "#number_slider" ).slider({
        min: 1,
        max: 10,
        change: changeVal,
        slide: slideVal
    });

    $( "#number_slider" ).slider( "value", 5 );
});