jquery - 调用函数的jQuery滑块始终关闭1，直到释放句柄

Question

我以前问过这个问题，很惊讶没有人能帮助我。您可以在这里确切地看到我正在尝试的内容http://training.mercury.stellarbluewebdesign.com/GainOil/您会注意到，在释放句柄之前，对顶部值的更新是不正确的。有人告诉我，我必须在计算它们的函数中使用 ui.value，但似乎没有人确切知道如何使用。jquery 代码在这里http://training.mercury.stellarbluewebdesign.com/GainOil/js/functions.js

Answer 1

您正在调用的“幻灯片”事件正在向您传递新值：

变量值 = ui.value;

不过，这还不是实际设置的值。直到您释放鼠标或再次继续设置该值。

如果您添加：

var realval = $( ".slider" ).slider( "option", "value" );
console.log(realval);

在您的幻灯片事件函数中，它将返回用于执行计算的数字。

您应该向 calculate_savings 函数添加一个参数，您可以通过它来执行该计算。但根据您拥有的滑块数量，这可能是个坏主意。

Answer 2

inKit 是正确的。“幻灯片”事件预测如果回调函数不取消它（例如通过返回 false）将发生的值变化。虽然它不适合您的用例，但以这种方式编程使开发人员能够选择是否允许幻灯片事件通过；不幸的是，这意味着在您的回调函数运行时，该值实际上尚未更新。

我认为 inKit 建议修改 calculate_savings 函数以便它可以处理传递正在更改的特定滑块的“未来”值可能是更强大的解决方案，但它可能需要比您有兴趣解决的更多重构。

另一种方法是使用 0 毫秒的 setTimeout 将您的 calculate_savings 调用从回调周期中中断。

这是您的代码的相关部分：

// hook all sliders to their span.value (display)
$( '.slider' ).bind( 'slide', function( e, ui )
{    
    var field = $( this ).attr( 'field' );
    var value = ui.value;
    var $matchingElem = $( '.value[field="' + field + '"]' )
    var decimals = $matchingElem.attr( 'decimals' ) || 0
    $matchingElem.text( addCommas( value ) )

    // Allow the slide event time to complete successfully and update the slider's value before calculating the savings.
    setTimeout(function(){calculate_savings();},0);
} )

可以在这里看到新的代码：http: //jsfiddle.net/maXcs/1/

注意：随着更新现在按预期工作，现在可以根据 VIDesignz 的建议删除 slidechange 绑定。

Answer 3

如果这是您更改右侧值的代码...

    // hook all sliders to their span.value (display)
$( '.slider' ).bind( 'slide', function( e, ui )
{   
    var field = $( this ).attr( 'field' );
    var value = ui.value;
    var $matchingElem = $( '.value[field="' + field + '"]' )
    var decimals = $matchingElem.attr( 'decimals' ) || 0
    $matchingElem.text( addCommas( value ) )
    calculate_savings();

} ).bind( 'slidechange', function()
{
    calculate_savings();
} ) // Ps. your missing a semicolon in your original script here <<<<

为什么要单独绑定计算储蓄？这不可行吗？

        // hook all sliders to their span.value (display)
$( '.slider' ).bind( 'slide', function( e, ui )
{   
    var field = $( this ).attr( 'field' );
    var value = ui.value;
    var $matchingElem = $( '.value[field="' + field + '"]' )
    var decimals = $matchingElem.attr( 'decimals' ) || 0
    $matchingElem.text( addCommas( value ) )
    calculate_savings();

} );