jQuery UI Slider 更改和滑动事件报告不同的结果答案

【问题标题】：jQuery UI Slider change and slide events report different resultsjQuery UI Slider 更改和滑动事件报告不同的结果
【发布时间】：2013-04-16 04:52:18
【问题描述】：

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

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 );
});

问题是滑块在调用 change 处理程序和调用 slide 处理程序时报告的值不同。

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

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

这确实给出了更一致的结果，但也意味着如果在我的情况下，每当事件发生变化时我有很多复杂的逻辑要执行，我必须重复代码。此外，计算涉及来自多个滑块的滑块值。

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

谢谢

【问题讨论】：

嗯，这是一种解决方案。对我来说这似乎很愚蠢，也许有人可以提供更好的答案。我设置了一些适用于两个范围的变量。在匿名事件处理函数中，我首先使用ui.value 设置适当的“全局”变量，然后调用处理计算逻辑的函数。 jsfiddle.net/AsDZJ/6
嗨，我不知道这是否会有所帮助，但您是否尝试使用停止事件并将结果与更改事件交叉。我这么说是因为我认为变化的最终值应该是停止事件值而不是幻灯片事件。

标签： javascript jquery jquery-ui anonymous-function jquery-slider

【解决方案1】：

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

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 );
});

【讨论】：