Javascript (jquery.ui.slider) - 当前全局方法的替代方法？

Question

基本 Javascript 问题 - 当前全局方法的替代方案？

首先我要说的是，我对 Javascript 没有太多的经验，但多年来一直断断续续地“涉足”它(主要是做基本的 jquery 支持的事情和一些表单计算)。

目前，我正在将一个计算器与基于 jquery.ui 的 slider 组合在一起。我让它运行良好，但昨晚遇到了一个问题，我必须使用全局变量来解决，虽然它现在可以工作，但我不认为这是正确的解决方案。

我从 slider 外部的计算函数中这样的一行开始，在 slider 内部的滑动事件上调用。我本可以将数学移到 slider 内，但它用于其他用途，我更愿意将其保留为外部函数，以便在需要时调用:

savings = Math.round(cost[$('.selectable-div.selected').attr('id')] * $( "#slider-gallons" ).slider( "value" ); );

...但它总是会根据 slider “开始”的位置而不是当前所在的位置进行计算，大概是因为“值”仅在 slider 移动后而不是在移动过程中发生变化？因此，如果我在位置 1，然后移动到位置 2，它就会显示位置 1 的结果。当我从位置 2 移动到位置 3 时，它会显示位置 2 的结果。当我从位置 3 移回位置 2 时，它会显示位置 2 的结果。 ，它会向我显示位置 3 的结果(以我“最后”的位置为准)。

我在 slider 内有另一小段代码，使用 ui.value，它会实时更新，位置 1 显示 1，位置 2 显示 2，等等。这就是我的问题所在，我不'不知道如何在 slider 函数本身之外调用“ slider 加仑”ui.value(即在我的计算函数内部)。

作为一种解决方法，我将 ui.value 定义为全局变量“var_slider_gallons_pos”并这样调用它:

savings = Math.round(cost[$('.selectable-div.selected').attr('id')] * var_slider_gallons_pos );

效果很好，但我对此不满意。还有其他方法可以做到这一点吗，I.E. (我知道下面的代码不起作用，只是我正在寻找的白日梦示例)。我只想要一些可以直接调用 slider ui.value 的东西，而不需要那些额外的 float 变量。

savings = Math.round(cost[$('.selectable-div.selected').attr('id')] * $( "#slider-gallons" ).slider( ui.value ); );

我不知道这是否有意义，但我试图调用 slider 元素的 ui.value，而不必先从 slider 事件中创建变量。

我确信这是我忽略的一些基本元素，因为我不熟悉 JavaScript，所以希望有人可以帮助我。

编辑:为了完整起见，这是我当前使用的完整 slider 和计算器代码。

slider :

$( "#slider-gallons" ).slider({
        value:250,
        min: 250,
        max: 3000,
        step: 250,
        slide: function( event, ui ) {
            var_slider_gallons_pos = ui.value;
            $( "#slider-gallons-amount" ).html( "Your facility produces <span>" + var_slider_gallons_pos + "</span> Gallons of waste oil each year");
            recalculateSavings();
        }
    });

    /* these lines exist to populate the text values on load */
    /* I could probably do the var_slider_gallons_pos part differently here as well */

    var_slider_gallons_pos = $( "#slider-gallons" ).slider( "value" );
    $( "#slider-gallons-amount" ).html( "Your facility produces <span>" + $( "#slider-gallons" ).slider( "value" ) + "</span> Gallons of waste oil each year");

计算函数:

function recalculateSavings() {
        var cost = {
            'calc-choice-natural-gas': 1.53,
            'calc-choice-electric': 4.86,
            'calc-choice-propane': 4.37,
            'calc-choice-fuel-oil': 3.74
        };

            /* this is the line causing me grief */
        savings = Math.round(cost[$('.selectable-div.selected').attr('id')] * var_slider_gallons_pos );
    $('#savings-calculator .calc-savings-one-year .savings').html('$' + formatNumber(savings));
    $('#savings-calculator .calc-savings-multiple-years .savings').html('$' + formatNumber(savings * var_slider_years_pos ));
}

Answer 1

我找到了另一种方法!

我仍然不确定这是否是最好的方法，但我对此很满意。

我将以下代码添加到幻灯片函数中，位于“recalculateSavings();”上方

$(this).slider('value', ui.value);

然后在数学函数中使用。

$( "#slider-gallons" ).slider( "value" );

这必须在继续重新计算部分之前强制将值更新为 ui.value，这似乎可以实现计算结果的实时更新。这使我能够摆脱所有全局函数。