0

私はこの奇妙な問題を抱えています。これが私のフィドルです：http://jsfiddle.net/m6qJC/7/

ご覧のとおり、最初のスライダーの値を取得し、次に 2 番目のスライダーの値を取得して、計算を実行し、結果を出力する必要があります。しかし、スライダー（最初のもの、2番目のものはそれをしていません）を速く動かすと、奇妙なことが計算されます。見てください。解決策はありますか？

$(document).ready(function () {
    $("#amount_slider").slider({
        orientation: "horizontal",
        range: false,
        min: 500,
        max: 4999,
        value: 500,
        step: 10,
                animate: 'slow',
                slide: function (event, ui) {
            $("#amountDisp").text(ui.value);
            calculate();
        }
    });
    $("#time_slider").slider({
        orientation: "horizontal",
        range: false,
        min: 7,
        max: 28,
                step: 7,
        value: 7,
                animate: true,
                slide: function (event, ui) {
            $("#timeDisp").text(ui.value);
            calculate();
        }
    });
    function calculate() {
        var amount = parseInt($("#amount_slider").slider("value"));
        var time = parseInt($("#time_slider").slider("value"));
                var coeficient = 0;
                switch(time){
                       case 7: coeficient = 1.09;break;
                       case 14: coeficient = 1.15;break;
                       case 21: coeficient = 1.19;break;
                       case 28: coeficient = 1.25;break;
                       }
        var rate = amount * coeficient;
        $("#result").text(rate.toFixed(2));
    }   
});

およびhtml：

<p>Money: <span id="amountDisp">500</span><div id="amount_slider"></div></p><p>Time: <span id="timeDisp">7</span><div id="time_slider"></div></p><p>Calculated <span id="result">545</span></p>
4

1 に答える 1

1

.slider("value")スライダの値は、フェッチに使用した時点ではまだ更新されていません。スライド イベントが終了した後にのみ更新されるため、計算では現在の値ではなく前の値が使用されます。

簡単な修正は、値をパラメーターとして渡すことです。

// in the amount slider event
calculate(parseInt(ui.value, 10), parseInt($("#time_slider").slider("value"), 10));

// in the time slider event
calculate(parseInt($("#amount_slider").slider("value"), 10), parseInt(ui.value, 10));

function calculate(amount, time) {
   ...

デモ: http://jsfiddle.net/m6qJC/9/

于 2013-05-19T08:09:09.730 に答える