2013-05-19 4 views
0

У меня есть эта странная проблема. Вот моя скрипка: http://jsfiddle.net/m6qJC/7/jQuery ползунок

И как вы можете видеть, это должно занять значение первого слайдера, а затем второго, сделать некоторый расчет и результат печати. НО, когда вы перемещаете ползунок (первый, второй не делает это) быстро, к тому или иному концу, он вычисляет странные вещи. Посмотрите PLS. Есть ли решение pls?

$(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> 

ответ

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/

+0

Сладкое, ТНХ :))) – jevniky

Смежные вопросы