Barnsley7 Ответов: 5

Помощь в переводе значений слайдера jquery

У меня есть ползунок jQuery, который пользователь может перетащить, выбирая значения от 0-100 (или 1-100).

Я хочу использовать значение ползунка, которое пользователь выбирает в процентах от другого значения переменной.
Это для того, чтобы выработать пенсионную стоимость пользователей и единовременную выплату. Идея заключается в том, что чем выше значение ползунка, тем больший процент пенсии пользователей используется в качестве пенсионной жертвы, что, в свою очередь, увеличивает их единовременную выплату.

например:
ФСБ = 400000
pension_2008 = fsb / 80 - (pensionSacrifice);
значение ползунка = от 0 до 100 (устанавливается пользователем)
(максимальное значение, которое может иметь pensionScarifice, - это четверть значения pension_2008)

тогда моя формула устанавливается как:
pensionSacrifice = parseInt(pension_2008)  /4 *(lumpSumSlide)/100;


ответ (если пользователь скользит до 100) должен быть = 1250
напр.
пенсионный фонд 5000/4 = 1250
*100 /100 = 1250

однако текстовое поле my pensionSacrifice возвращает значение 1001.25, а pension_2008 = 4005.05

и иногда я получаю немного противоречивые результаты, когда перемещаю ползунок вперед и назад.
размер пенсии должен варьироваться от 0 до 1250 (но идет от 0 до 1001)
pension_2008 должен варьироваться от 3750 до 5000 (но идет примерно от 4000 до 5000)

кто-нибудь знает, что не так с моей формулой, пожалуйста?
может быть, мне следует установить минимальное и максимальное значение слайдера в переменное значение, а не 0-100, и вычислить его в процентах?
Я могу представить полный код, если потребуется, но просто пытаюсь сделать его простым.

Что я уже пробовал:

function  doMath() {
//variable = value (declare all variables)
var lumpSumSlide = $("#slidervalue").val(); 
var stdlumpSum = $("#stdlumpSum").val(); 
var pension_2008 = $("#pension_2008").val();
var annualSalary = $("#annualSalary").val();
var fsb = $("#fsb").val();//final salary benefits
var years = $("#years").val();//years they have paid into scheme
var pensionSacrifice = $("#pensionSacrifice").val();//members chosen pension sacrifice
var maxPensionSacrifice = $("#pensionSacrifice").val();//max pension one can give up
//other values - max lump sum/tax free lumpsum etc

//put maths calcs here
	fsb = (annualSalary * years);
	pension_2008 = fsb/80 - (pensionSacrifice); //+parseInt(annualSalary);
	stdlumpSum = pension_2008 * 3;
	maxPensionSacrifice=pension_2008/4;
	pensionSacrifice = maxPensionSacrifice * (lumpSumSlide)/100;
	
	
	
//round off calc to 2 dec places
$("#pension_2008").val(custRound(pension_2008,2));
$("#annualSalary").val(custRound(annualSalary,2));
$("#fsb").val(custRound(fsb,2));
$("#stdlumpSum").val(custRound(stdlumpSum,2));
$("#pensionSacrifice").val(custRound(pensionSacrifice,2));
$("#maxPensionSacrifice").val(custRound(maxPensionSacrifice,2));

} 
//round off function
function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}

5 Ответов

Рейтинг:
28

Barnsley7

теперь все в порядке. найти проблему.
Я использовал переменную в вычислении до того, как она была объявлена !
такие как этот:

pension_2008 = fsb / 80 - (pensionSacrifice);

решение здесь:
https://jsfiddle.net/h4fero5o/10/

Рейтинг:
2

Peter Leow

Вы дали нам длинную историю и длинный список кода, но пропустили самую важную часть, ваш код слайдера jQuery, если ваша формула верна, то виновником будет значение, исходящее от вашего слайдера. Я начну с того, что выясню, что значение, возвращаемое ползунком, находится в диапазоне от 0 до 100, как только это будет правильно проверено, а затем взгляну на формулу и остальную часть вашего кода и полностью зависит от вас. Но для определения возвращаемого значения из слайдера вы можете адаптировать его из моего демо-кода ниже:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#slider" ).slider({
      min: 0,
      max: 100,
      slide: function( event, ui ) {
        $( "#slidervalue").val( ui.value );   
        $( "#pensionSacrifice").val( 5000/4 * ui.value / 100  );
      }
    });
  } );
  </script>
</head>
<body>
<p>
slidervalue: <input type="text" id="slidervalue" readonly style="border:0; color:#f6931f; font-weight:bold;" value="0">
</p>
<div id="slider"></div>
<p>
pensionSacrifice : <input type="text" id="pensionSacrifice" readonly style="border:0; color:#f6931f; font-weight:bold;" value="0">
</p>
</body>
</html>
Смотрите демо-версию по адресу JSFiddle[^]

Рейтинг:
1

Barnsley7

Так что если зарплата = 20 000 за 20 лет...

pensionSacrifice должен варьироваться от 0 до 1250, но он идет от 0 до 1001 (или от 12, Если минимальное значение начинается с 1)
pension_2008 должен варьироваться от 3750 до 5000 (но идет примерно от 4000 до 5000)

Рейтинг:
0

Barnsley7

извините, вот вся штука на JS Fiddle:
https://jsfiddle.net/h4fero5o/

Рейтинг:
0

Barnsley7

Я надеялся сделать что-то вроде:

$( "#pensionSacrifice").val( 'variableNameHere'.ui.value);


или установить минимальное максимальное значение для имени переменной?

min: 'myVariableName', max: ('MyVariableName'), step: 1, value: 50,


но не уверен, что это возможно? (пробовал разные вещи, но ничего не получалось в данный момент. Есть ли учебник, который я могу использовать, чтобы продемонстрировать синтаксис?

спасибо, что посмотрели