Цитата:
Он подойдет для моих целей? Он получается еще короче. Он правда был под инпут, я его переписал под свой обычный див.
$( 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)
});
|
| Часовой пояс GMT +3, время: 02:35. |