Бегунки на Jquery

@Oktu · Регистрация: 15.08.2012

Студворк — интернет-сервис помощи студентам

Добрый день.

Помогите пожалуйста, хотя бы намеком.

Есть два стандартных бегунка Jquery, один меняет переменную zarplata, втрой gbu

Как добавить третий скрипт, который на основе значений переменных будет выводить значение например суммы переменных zarplata + gbu

вот коды бегунков:

HTML5
1
<div id="slider-range-zarplata"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
          $(function() {
            $( "#slider-range-zarplata" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#zarplata" ).val( ui.value);
                var zarplata = $("#zarplata").val();
                $('#zarplata_t').html(ui.value + ' ' );
              }
            });
            $( "#zarplata" ).val($( "#slider-range-zarplata" ).slider( "value" ) );
          });
          
</script>

HTML5
1
<div id="slider-range-gbu" style="width:95%; font-size:200%; margin:0 auto; "></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
          $(function() {
            $( "#slider-range-gbu" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#amount_gbu" ).val( ui.value);
                var gbu = $("#amount_gbu").val();
                $('#amount_gbu').html(ui.value + ' ' );
              }
            });
            $( "#amount_gbu" ).val($( "#slider-range-gbu" ).slider( "value" ) );
          });
          
</script>

@Armi · 20.04.2015, 19:27

И в чем проблема? Вы сами ответили на свой вопрос.

JavaScript
1
2
var summ=zarplata + gbu;
alert(summ);

Надо только переменные zarplata и gbu задать за пределами функции а то они у вас локальные.

@Oktu · 20.04.2015, 19:38 **[ТС]**

проблема в том что сумма не хочет меняться во время изменения данных бегунков

Добавлено через 1 минуту

Сообщение от Armi

Надо только переменные zarplata и gbu задать за пределами функции а то они у вас локальные.

поясните пожалуйста, я как то пока с jq не очень знаком

@Armi · 20.04.2015, 19:45

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function(){
 var zarplata, gbu;
 
$( "#slider-range-zarplata" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#zarplata" ).val( ui.value);
                zarplata = $("#zarplata").val();
                $('#zarplata_t').html(ui.value + ' ' );
              }
            });
            $( "#zarplata" ).val($( "#slider-range-zarplata" ).slider( "value" ) );
$( "#slider-range-gbu" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#amount_gbu" ).val( ui.value);
                gbu = $("#amount_gbu").val();
                $('#amount_gbu').html(ui.value + ' ' );
              }
            });
            $( "#amount_gbu" ).val($( "#slider-range-gbu" ).slider( "value" ) );
});

@Oktu · 20.04.2015, 19:53 **[ТС]**

Спасибо, действительно логично объединить в один скрипт, переписал, но все равно сумма не выводится при изменении значении бегунков

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script>
 
 var zarplata;
 var gbu;
          $(function() {
            $( "#slider-range-gbu" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#amount_gbu" ).val( ui.value);
                var gbu = $("#amount_gbu").val();
                $('#amount_gbu').html(ui.value + ' ' );
              }
            });
            $( "#amount_gbu" ).val($( "#slider-range-gbu" ).slider( "value" ) );
          });
          
          $(function() {
            $( "#slider-range-zarplata" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#zarplata" ).val( ui.value);
                var zarplata = $("#zarplata").val();
                $('#zarplata_t').html(ui.value + ' ' );
              }
            });
            $( "#zarplata" ).val($( "#slider-range-zarplata" ).slider( "value" ) );
          });
 
var summ=zarplata + gbu;
$('#skidka').html(summ);

HTML5
1
<div id="skidka">0</div>

@Armi · 20.04.2015, 19:55

var уберите внутри функции рядом с переменными а то получаются там другие переменные.

@Oktu · 20.04.2015, 19:58 **[ТС]**

изменил, все равно бегунки двигаю сумма не меняется

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
 
 var zarplata;
 var gbu;
          $(function() {
            $( "#slider-range-gbu" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#amount_gbu" ).val( ui.value);
                gbu = $("#amount_gbu").val();
                $('#amount_gbu').html(ui.value + ' ' );
              }
            });
            $( "#amount_gbu" ).val($( "#slider-range-gbu" ).slider( "value" ) );
          });
          
          $(function() {
            $( "#slider-range-zarplata" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#zarplata" ).val( ui.value);
                zarplata = $("#zarplata").val();
                
                
                $('#zarplata_t').html(ui.value + ' ' );
              }
            });
            $( "#zarplata" ).val($( "#slider-range-zarplata" ).slider( "value" ) );
          });
 
var summ=zarplata + gbu;
$('#skidka').html(summ);
 
 
</script>

HTML5
1
<div id="skidka">1</div>

@Armi · 20.04.2015, 20:10

Вам надо чтоб при изменении сразу менялась. Тогда уточняйте

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
 
 var zarplata;
 var gbu;
 var summ;
          $(function() {
            $( "#slider-range-gbu" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#amount_gbu" ).val( ui.value);
                gbu = $("#amount_gbu").val();
                $('#amount_gbu').html(ui.value + ' ' );
summ=zarplata + gbu;
$('#skidka').html(summ);
              }
            });
            $( "#amount_gbu" ).val($( "#slider-range-gbu" ).slider( "value" ) );
          });
          
          $(function() {
            $( "#slider-range-zarplata" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#zarplata" ).val( ui.value);
                zarplata = $("#zarplata").val();
                
                
                $('#zarplata_t').html(ui.value + ' ' );
summ=zarplata + gbu;
$('#skidka').html(summ);
              }
            });
            $( "#zarplata" ).val($( "#slider-range-zarplata" ).slider( "value" ) );
          });
 
 
 
 
</script>

@Oktu · 20.04.2015, 20:20 **[ТС]**

Спасибо.

Есть прогресс, теперь отрывисто, т.е. не плавно за изменнеием бегунка а отрывками появляется надпись типа такого:

undefined8200 , причем 8200 сумма явно не правильная... что еще можно сделать на Ваш взгляд?

@Armi · 20.04.2015, 20:26

Потому что один ползунок небось двигали а по умолчанию переменные не заданы. Попробуйте добавьте вначале.

JavaScript
1
2
3
var zarplata=0;
 var gbu=0;
 var summ=0;

@Oktu · 20.04.2015, 20:29 **[ТС]**

прогресс, но не полный

теперь на первый бегунок не реагирует
а на второй плавно меняет значение но не суммы, а чисто значение второго бегунка, и все также приписывает undefined9600

вот код на всякий случай:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>
 
 var zarplata=0;
 var gbu=0;
 var summ=0;
          $(function() {
            $( "#slider-range-gbu" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#amount_gbu" ).val( ui.value);
                gbu = $("#amount_gbu").val();
                
summ=zarplata + gbu;
$('#skidka').html(summ);
 
                $('#amount_gbu').html(ui.value + ' ' );
              }
            });
            $( "#amount_gbu" ).val($( "#slider-range-gbu" ).slider( "value" ) );
          });
          
          $(function() {
            $( "#slider-range-zarplata" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#zarplata" ).val( ui.value);
                zarplata = $("#zarplata").val();
                
summ=zarplata + gbu;
$('#skidka').html(summ);
 
                $('#zarplata_t').html(ui.value + ' ' );
                
              }
            });
            $( "#zarplata" ).val($( "#slider-range-zarplata" ).slider( "value" ) );
          });
 
 
 
</script>

HTML5
1
            <div id="skidka">1</div>

@Armi · 20.04.2015, 20:32

Ещё html код выложите из которых бегунки делает.

@Oktu · 20.04.2015, 20:35 **[ТС]**

не понял вас, вот и весь код, в хедере подключаю библиотеку:

HTML5
1
2
3
4
<script type="text/javascript" src="/scripts/accounting.js"></script> 
<script type="text/javascript" src="/scripts/jquery.touchSwipe.min.js"></script> 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>    
<link rel="stylesheet" href="/css/begunok.css">

и все в принципе

ну еще есть дивайсы которые выводят значения бегунков:

HTML5
1
2
3
4
5
6
7
        <div id="slider-range-zarplata" style="width:95%; font-size:200%; margin:0 auto; "></div>
 
        <div id="zarplata_t" class="calc_srok_uah">0</div>
 
        <div id="slider-range-gbu" style="width:95%; font-size:200%; margin:0 auto; "></div>
 
    <div id="amount_gbu" class="calc_srok_uah">0</div>

и больше ничего нет

@Armi · 20.04.2015, 20:44

У div-ов нет атрибута val. Я думал у вас поля.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var zarplata=0;
 var gbu=0;
 var summ=0;
          $(function() {
            $( "#slider-range-gbu" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#amount_gbu" ).html( ui.value);
                gbu = ui.value;
                
summ=zarplata + gbu;
$('#skidka').html(summ);
 
                $('#amount_gbu').html(ui.value + ' ' );
              }
            });
            $( "#amount_gbu" ).html($( "#slider-range-gbu" ).slider( "value" ) );
          });
          
          $(function() {
            $( "#slider-range-zarplata" ).slider({
              range: "min",
              value: 1000,
              min: 500,
              max: 10000,
              step: 100,
              slide: function( event, ui ) {
                $( "#zarplata" ).html( ui.value);
                zarplata = ui.value;
                
summ=zarplata + gbu;
$('#skidka').html(summ);
 
                $('#zarplata_t').html(ui.value + ' ' );
                
              }
            });
            $( "#zarplata" ).html($( "#slider-range-zarplata" ).slider( "value" ) );
          });

@Oktu · 20.04.2015, 21:17 **[ТС]**

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

Спасибо!!

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@Armi 312 / 106 / 69 Регистрация: 18.04.2015 Сообщений: 346
	20.04.2015, 19:55
	var уберите внутри функции рядом с переменными а то получаются там другие переменные. 1

@Oktu 65 / 3 / 1 Регистрация: 15.08.2012 Сообщений: 208
	20.04.2015, 20:20 [ТС]
	Спасибо. Есть прогресс, теперь отрывисто, т.е. не плавно за изменнеием бегунка а отрывками появляется надпись типа такого: undefined8200 , причем 8200 сумма явно не правильная... что еще можно сделать на Ваш взгляд? 0

@Armi 312 / 106 / 69 Регистрация: 18.04.2015 Сообщений: 346
	20.04.2015, 20:32
	Ещё html код выложите из которых бегунки делает. 1

@Oktu 65 / 3 / 1 Регистрация: 15.08.2012 Сообщений: 208
	20.04.2015, 21:17 [ТС]
	я как то не понял что вы в последний раз изменили, но получилось!!!!! Спасибо!! 0

Бегунки на Jquery

Решение