Использовать данные slider.ui для расчетов
Всех приветствую. Начал изучать Javascript и jquerry.
Сделал на сайте несколько ползунков на jquerry. Далее мне нужно использовать значения в ползунках для дальнейших расчетов. Пробовал
var summ = document.getElementById("contentSlider").innerHTML;
не работают. попробовал так var srok = $( "#contentSlider" ); работает, но выводит [object Object], а если применить математические действия - то выводит NaN Попробовал так var summ = $( ".landing-raschet-srok-number-summ" ).text; и он выдал мне
function ( value ) { return access( this, function( value ) { return value === undefined ? jQuery.text( this ) : this.empty().each( function() { if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) { this.textContent = value; } } ); }, null, value, arguments.length ); }
Я не могу понять, как же мне получить те значения, которые он выдает в ползунки... Код одного из ползунков:
$(document).ready(function(){
$( "#slider" ).slider({
range: "min",
value : 50000000,//Значение, которое будет выставлено слайдеру при загрузке
min : 100000,//Минимально возможное значение на ползунке
max : 100000000,//Максимально возможное значение на ползунке
step : 100000,//Шаг, с которым будет двигаться ползунок
create: function( event, ui ) {
val = $( "#slider" ).slider("value");//При создании слайдера, получаем его значение в перемен. val
$( "#contentSlider" ).html( addSpaces(val.toString()) );//Заполняем этим значением элемент с id contentSlider
},
slide: function( event, ui ) {
$( "#contentSlider" ).html( addSpaces(ui.value.toString()) );//При изменении значения ползунка заполняем элемент с id contentSlider
}
});
});
function addSpaces(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ' ' + '$2');
}
return x1 + x2;
}
|
the_little,
document.getElementById("contentSlider").value или $( "#contentSlider" ).val(); если это input |
Цитата:
Цитата:
Хотя нужно чтобы это был input type=text, и при этом туда можно было вписывать значение, но это отдельная тема для разговора. Я пока до этого не дошел, как это сделать... |
Цитата:
$( "#contentSlider" ).html(); |
Цитата:
srok = $( "#contentSlider" ).html();
document.getElementById('calc-summ').innerHTML = srok;
в данном случае он не выводит ничего Дополню, возможно это имеет значение. Этот код я пишу в отдельном скрипте, в котором предполагается потом производить расчеты. Не в том, где ползунок выводится. Хотя если открыть код страницы и посмотреть, то там написано <div id="contentSlider2" class="landing-raschet-srok-number-summ">24</div> <div id="contentSlider" class="landing-raschet-summa-number-summ">50 000 000</div> |
the_little,
что мешает написать код расчёта в строке 13? |
Цитата:
$(document).ready(function(){
$( "#slider2" ).slider(
{
range: "min",
value : 24,//Значение, которое будет выставлено слайдеру при загрузке
min : 1,//Минимально возможное значение на ползунке
max : 80,//Максимально возможное значение на ползунке
step : 1,//Шаг, с которым будет двигаться ползунок
create: function( event, ui )
{
val = $( "#slider2" ).slider("value");//При создании слайдера, получаем его значение в перемен. val
$( "#contentSlider2" ).html( val );//Заполняем этим значением элемент с id contentSlider
},
slide: function( event, ui )
{
$( "#contentSlider2" ).html( ui.value );//При изменении значения ползунка заполняем элемент с id contentSlider
srok = $( "#contentSlider2" ).html();
document.getElementById('calc-summ').innerHTML = srok;
}
});
});
Только как теперь сделать, чтобы он и значение по умолчанию подставлял? Он его игнорит и ничего не выводит... |
the_little,
Цитата:
slide продублировать в change, значение установить после инициализации. |
Цитата:
$(document).ready(function(){
$( "#slider2" ).slider(
{
range: "min",
value : 24,//Значение, которое будет выставлено слайдеру при загрузке
min : 1,//Минимально возможное значение на ползунке
max : 80,//Максимально возможное значение на ползунке
step : 1,//Шаг, с которым будет двигаться ползунок
slide: function( event, ui )
{
$( "#contentSlider2" ).html( ui.value );//При изменении значения ползунка заполняем элемент с id contentSlider
},
change: function( event, ui )
{
$( "#contentSlider2" ).html( ui.value );//При изменении значения ползунка заполняем элемент с id contentSlider
//srok = $( "#contentSlider2" ).html();
//calc_srok = parseInt(srok, 10);
//zxc = calc_srok + asd
//document.getElementById('calc-summ').innerHTML = zxc;
}
});
});
|
the_little,
да в slide и в change одно и тоже и строка 23
$( "#slider2" ).slider("option", "value", 24)
|
Цитата:
Он подойдет для моих целей? Он получается еще короче. Он правда был под инпут, я его переписал под свой обычный див.
$( function() {
$( "#slider2" ).slider({
range: "min",
value: 24,
min: 1,
max: 80,
slide: function( event, ui )
{
$( "#contentSlider2" ).html( ui.value );
}
});
$( "#contentSlider2" ).html( $( "#slider2" ).slider( "value" ) );
});
|
Цитата:
|
Если смотреть вариант, который я собрал под вашим руководством получается так. Переменную новую объявил, вывел, работает. Я сначала подумал что не работает, а он подцепляет значение когда ползунок отпускаешь. Пока кнопка мышки зажата - не подцепляет.
$(document).ready(function(){
$( "#slider2" ).slider(
{
range: "min",
value : 24,
min : 1,
max : 80,
step : 1,
slide: function( event, ui )
{
$( "#contentSlider2" ).html( ui.value );
},
change: function( event, ui )
{
$( "#contentSlider2" ).html( ui.value );
srok = $( "#contentSlider2" ).html();
calc_srok = parseInt(srok, 10);
document.getElementById('calc-summ').innerHTML = calc_srok;
}
});
$( "#slider2" ).slider("option", "value", 24);
});
СПАСИБО! Сейчас проделаю то же самое со вторым слайдером и потом попробую где-то над двумя переменными поработать. |
Цитата:
Цитата:
|
Создал переменные. привёл их к нужному виду.
Одни переменные задаются в первом слайдере. Другие задаются во втором слайдере. По отдельности работают как надо. Но когда я их складываю, например во втором слайдере, то: - при прокрутке второго слайдера все правильно работает. - при прокрутке первого слайдера сумма двух переменных не меняется. При изменении положения второго слайдера - работает правильно. Если я пытаюсь арифметические действия производить вне снайперов - то не работает... Вот полный код скрипта в настоящий момент.
$(document).ready(function(){
$( "#slider" ).slider({
range: "min",
value : 50000000,
min : 100000,
max : 100000000,
step : 100000,
slide: function( event, ui )
{
$( "#contentSlider" ).html(addSpaces(ui.value.toString()));
},
change: function( event, ui )
{
$( "#contentSlider" ).html(addSpaces(ui.value.toString()));
summ = $( "#contentSlider" ).html();
free_summ = summ.replace(/[^-0-9]/gim,'');
calc_summ = free_summ / 1000000;
document.getElementById('calc-market').innerHTML = calc_summ;
}
});
$( "#slider" ).slider("option", "value", 50000000);
});
function addSpaces(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ' ' + '$2');
}
return x1 + x2;
}
$(document).ready(function(){
$( "#slider2" ).slider(
{
range: "min",
value : 24,
min : 1,
max : 80,
step : 1,
slide: function( event, ui )
{
$( "#contentSlider2" ).html( ui.value );
},
change: function( event, ui )
{
$( "#contentSlider2" ).html( ui.value );
srok = $( "#contentSlider2" ).html();
free_srok = parseInt(srok, 10);
garant_summ = calc_summ + free_srok;
document.getElementById('calc-summ').innerHTML = garant_summ;
}
});
$( "#slider2" ).slider("option", "value", 24);
});
|
the_little,
html покажите |
Цитата:
<div class="landing-raschet-left-block"> <h2>Рассчитайте стоимость прямо сейчас</h2> <div class="landing-raschet-summa"> <div class="landing-raschet-summa-text">Сумма гарантии</div> <div class="landing-raschet-summa-number"> <div id="contentSlider" class="landing-raschet-summa-number-summ"></div> <div class="landing-raschet-summa-number-curr">₽</div> </div> </div> <div class="grade1"> <div id="slider"></div> </div> <div class="landing-raschet-srok"> <div class="landing-raschet-srok-text">Срок гарантии</div> <div class="landing-raschet-srok-number"> <div id="contentSlider2" class="landing-raschet-srok-number-summ"></div> <div class="landing-raschet-srok-number-curr">месяцев</div> </div> </div> <div class="grade2"> <div id="slider2"></div> </div> </div> |
the_little,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var arr = [0, 0];
function fn() {
$("#contentSlider").html(addSpaces(arr[0]));
$("#contentSlider2").html(arr[1]);
$("#calc-summ").html(arr[0] / 1E6 + arr[1])
}
$("#slider").slider({
range: "min",
value: 5E7,
min: 1E5,
max: 1E8,
step: 1E5,
slide: function(event, ui) {
arr[0] = +ui.value;
fn()
},
change: function(event, ui) {
arr[0] = +ui.value;
fn()
}
});
$("#slider").slider("option", "value", 5E7);
function addSpaces(nStr) {
nStr += "";
x = nStr.split(".");
x1 = x[0];
x2 = x.length > 1 ? "." + x[1] : "";
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) x1 = x1.replace(rgx,
"$1" + " " + "$2");
return x1 + x2
}
$("#slider2").slider({
range: "min",
value: 24,
min: 1,
max: 80,
step: 1,
slide: function(event, ui) {
arr[1] = +ui.value;
fn()
},
change: function(event, ui) {
arr[1] = +ui.value;
fn()
}
});
$("#slider2").slider("option", "value", 24)
});
</script>
</head>
<body>
<div class="landing-raschet-left-block">
<h2>Рассчитайте стоимость прямо сейчас</h2>
<div class="landing-raschet-summa">
<div class="landing-raschet-summa-text">Сумма гарантии</div>
<div class="landing-raschet-summa-number">
<div id="contentSlider" class="landing-raschet-summa-number-summ slider-range"></div>
<div class="landing-raschet-summa-number-curr">₽</div>
</div>
</div>
<div class="grade1">
<div id="slider"></div>
</div>
<div class="landing-raschet-srok">
<div class="landing-raschet-srok-text">Срок гарантии</div>
<div class="landing-raschet-srok-number">
<div id="contentSlider2" class="landing-raschet-srok-number-summ slider-range"></div>
<div class="landing-raschet-srok-number-curr">месяцев</div>
</div>
</div>
<div class="grade2">
<div id="slider2"></div>
</div>
</div>
<div id="calc-summ"></div>
</body>
</html>
|
Ну что я могу сказать - профессионал!
Сейчас я изучу что и как вы написали, потом, если вы не против - задам вопросы по написанному. Готовое решение всегда хорошо, но я учусь, хочу понять что там написано, чтобы потом мог самостоятельно повторить или применить где-то еще. Спасибо! |
В целом все понял.
А вот это fn()что делает? Отправляет значение в функцию fn()? Я немного добавил арифметики, и еще пару элементов в массив. Считает все правильно, но при загрузке страницы, пока ползунок не подвигаешь - ничего не выводит. Подвигаешь - все правильно считает.
$(function() {
var arr = [0, 0, 0, 0];
function fn() {
$("#contentSlider").html(addSpaces(arr[0]));
$("#contentSlider2").html(arr[1]);
$("#calc-summ").html(addSpaces(arr[2]));
$("#calc-market").html(addSpaces(arr[2] * 1.2));
if (arr[0] <= 1000000 && arr[1] <= 12)
{
arr[2] = 3000;
}
else
{
arr[2] = arr[0] * arr[1] / 12 * 1.5 / 100;
}
}
$("#slider").slider({
range: "min",
value: 5E7,
min: 1E5,
max: 1E8,
step: 1E5,
slide: function(event, ui) {
arr[0] = +ui.value;
fn()
},
change: function(event, ui) {
arr[0] = +ui.value;
fn()
}
});
$("#slider").slider("option", "value", 5E7);
function addSpaces(nStr) {
nStr += "";
x = nStr.split(".");
x1 = x[0];
x2 = x.length > 1 ? "." + x[1] : "";
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) x1 = x1.replace(rgx,
"$1" + " " + "$2");
return x1 + x2
}
$("#slider2").slider({
range: "min",
value: 24,
min: 1,
max: 80,
step: 1,
slide: function(event, ui) {
arr[1] = +ui.value;
fn()
},
change: function(event, ui) {
arr[1] = +ui.value;
fn()
}
});
$("#slider2").slider("option", "value", 24)
});
|
the_little,
мне сложно понять вашу логику ... обычно алгоритм такой: изменили данные -- подсчитали/сохранили -- вывели ... а не наоборот |
Цитата:
$(function() {
var arr = [0, 0, 0, 0];
function fn() {
$("#contentSlider").html(addSpaces(arr[0]));
$("#contentSlider2").html(arr[1]);
if (arr[0] <= 1000000 && arr[1] <= 12)
{
arr[2] = 3000;
}
else
{
arr[2] = arr[0] * arr[1] / 12 * 1.5 / 100;
}
$("#calc-summ").html(addSpaces(arr[2]));
$("#calc-market").html(addSpaces(arr[2] * 1.2));
}
|
the_little,
работает как вам нужно? или есть вопросы? |
Да, работает! Огромное спасибо.
Буду пробовать для понимания переделать на инпуты) но это уже так, в целях образования. |
| Часовой пояс GMT +3, время: 09:39. |