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