Question

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

我首先要说的是，我没有大量的Javascript经验，但是已经多次打开和关闭它（主要是做基本的jquery动力和一些表格计算）。

目前，我正在使用基于jquery.ui的滑块组合计算器。我有它运作良好，但昨晚遇到了一个我必须使用全局变量来解决的问题，虽然它现在有效，但我觉得这不是正确的解决方案。

我在滑块外部的计算功能中使用这样的一行开始，在滑块内的滑动事件上调用。我本可以在滑块内移动数学，但它用于其他东西，我更喜欢将它作为外部函数保存，我可以在需要时调用：

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

...但它总是会根据滑块“开始”的位置而不是当前的位置来计算，大概是因为“值”仅在滑块移动后才更改，而不是在？因此，如果我在位置1，并移动到2，它将显示我的结果1.当我从位置2移动到位置3时，它将显示位置2的结果。当我从3移回到2时，它会显示位置3的结果（无论我是'最后'）。

我使用ui.value在滑块中有另一小段代码，它会实时更新，位置1显示1，位置2显示2，等等。这是我的问题所在，我不知道我知道如何在滑块函数本身之外调用“滑块加仑”ui.value（我的计算函数中的IE）。

作为解决方法，我将ui.value定义为全局变量“var_slider_gallons_pos”，并将其命名为：

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

效果很好，但我对此并不满意。有没有另一种方法可以做到这一点，I.E。（我知道下面的代码不起作用，只是我想要的一个管道梦想的例子）。我只想要一些我可以直接调用滑块ui.value的东西，而不需要那些额外的变量浮动。

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

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

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

编辑：为了完整起见，这是我目前正在使用的完整滑块和计算器代码。

滑块：

$( "#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，然后再转到重新计算的部分，这似乎可以实现计算结果的实时更新。这让我摆脱了所有的全局功能。

Javascript（jquery.ui.slider） - 当前全局方法的替代方案？

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

1 个答案: