Как вставить значение в условие из другого ползунка, с конкретным id?
Есть полуготовый калькулятор состоящий из 2-х ползунков и выпадающего списка:
$(document).ready(function() {
var check = 0;
$('.id').on('change', function() {
check = 0;
$('input:checkbox:checked').each(function() {
if ($(this).prop("checked")) {
check = Number(check) + Number($(this).data('check'));
}
});
summ();
});
$("#polzunok-1").slider({
slide: function(event, ui) {
if (ui.value >= 30 && ui.value < 50) {
$("#gorod")[0].selectedIndex = 4;
$("#polzunok-2").slider({
value: 3
});
} else if (ui.value >= 20 && ui.value < 30) {
$("#gorod")[0].selectedIndex = 3;
$("#polzunok-2").slider({
value: 5
});
} else if (ui.value = 10 && ui.value < 20) {
$("#gorod")[0].selectedIndex = 2;
$("#polzunok-2").slider({
value: 3
});
} else if (ui.value >= 5 && ui.value < 10) {
$("#gorod")[0].selectedIndex = 1;
$("#polzunok-2").slider({
value: 2
});
} else if (ui.value >= 3) {
$("#gorod")[0].selectedIndex = 0;
$("#polzunok-2").slider({
value: 1
});
}
}
});
$("#polzunok-2").slider({
slide: function(event, ui) {
if (ui.value >= 8) {
$("#gorod")[0].selectedIndex = 4;
$("#polzunok-1").slider({
value: 30
});
} else if (ui.value >= 5 && ui.value < 8) {
$("#gorod")[0].selectedIndex = 3;
$("#polzunok-1").slider({
value: 20
});
} else if (ui.value >= 3 && ui.value < 5) {
$("#gorod")[0].selectedIndex = 2;
$("#polzunok-1").slider({
value: 10
});
} else if (ui.value >= 2 && ui.value < 3) {
$("#gorod")[0].selectedIndex = 1;
$("#polzunok-1").slider({
value: 5
});
} else if (ui.value >= 1 && ui.value < 2) {
$("#gorod")[0].selectedIndex = 0;
$("#polzunok-1").slider({
value: 3
});
}
}
});
});
$(function() {
$("#gorod").change(function(e) {
if (this.options[1].selected) {
$("#polzunok-2").slider({
value: 2
});
$("#polzunok-1").slider({
value: 5
});
}
});
$("#gorod").change(function(e) {
if (this.options[0].selected) {
$("#polzunok-2").slider({
value: 1
});
$("#polzunok-1").slider({
value: 3
});
}
});
$("#gorod").change(function(e) {
if (this.options[2].selected) {
$("#polzunok-2").slider({
value: 3
});
$("#polzunok-1").slider({
value: 10
});
}
});
$("#gorod").change(function(e) {
if (this.options[3].selected) {
$("#polzunok-2").slider({
value: 5
});
$("#polzunok-1").slider({
value: 20
});
}
});
$("#gorod").change(function(e) {
if (this.options[4].selected) {
$("#polzunok-2").slider({
value: 8
});
$("#polzunok-1").slider({
value: 30
});
}
});
var tran = 1,
result_outptut = jQuery("#amount3"),
client = 1,
revenue = 0;
var polzunok1Price = 0;
var polzunok2Price = 0;
var typeAllPrice = 0;
function updatePrice() {
var price = polzunok1Price + polzunok2Price + typeAllPrice;
$("#amount3").val("$" + price);
}
function recount() {
revenue = temp + tran;
result_outptut.html(revenue + ' руб/мес');
};
jQuery('.transport').click(function() {
tran = $('.transport').val();
recount();
});
$("#polzunok-1").slider({
value: 0,
min: 3,
max: 50,
step: 1,
slide: function(event, ui) {
$("#amount1").val(ui.value);
polzunok1Price = ui.value;
updatePrice();
if (ui.value >= 30) {
$("#gorod")[0].selectedIndex = 4;
} else if (ui.value >= 20) {
$("#gorod")[0].selectedIndex = 3;
} else if (ui.value >= 10) {
$("#gorod")[0].selectedIndex = 2;
} else if (ui.value >= 5) {
$("#gorod")[0].selectedIndex = 1;
} else if (ui.value >= 3) {
$("#gorod")[0].selectedIndex = 0;
}
}
});
$("#polzunok-2").slider({
value: 0,
min: 1,
max: 15,
step: 1,
slide: function(event, ui) {
$("#amount2").val(ui.value);
polzunok2Price = ui.value;
updatePrice();
if (ui.value >= 8) {
$("#gorod")[0].selectedIndex = 4;
} else if (ui.value >= 5) {
$("#gorod")[0].selectedIndex = 3;
} else if (ui.value >= 3) {
$("#gorod")[0].selectedIndex = 2;
} else if (ui.value >= 2) {
$("#gorod")[0].selectedIndex = 1;
} else if (ui.value >= 1) {
$("#gorod")[0].selectedIndex = 0;
}
}
});
if ($('[type="checkbox"]').is(':checked')) {
typeAllPrice = parseInt($('[type="checkbox"]:checked').val());
updatePrice();
}
$('[type="checkbox"]').change(function() {
var typePrice = parseInt(this.value);
if ($(this).is(':checked')) {
if (isFinite(typePrice)) {
typeAllPrice += typePrice;
updatePrice();
}
} else {
typeAllPrice -= typePrice;
updatePrice();
}
})
});<html>
<head>
<title>Калькулятор</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
</head>
<body class="no-bg its-api tariff-">
<div id="page" class="js-content-switcher design preview resize-960 theme-3 theme-3_color-5" style="min-height: 150px;">
<div class="wrap-calc" style="max-width: 820px;">
<ul id="viewing_panel" class="blocks fields grid-table no-border 812787" style="max-width: 820px;">
<li class="ub-grid grid-line" id="grid-3" data-columns="1">
<div class="ub-grid grid-column" id="grid-3-3">
<div class="grid-subline">
<div class="grid-subcolumn" style="width: 100%;">
<div data-id="3" data-type="selector" data-hide="[hide]" class="ub-grid padding-lr-24 " style="padding-top: 12px; padding-bottom: 18px; display: block;">
<div class="field field-select">
<div class="field-title size-18" data-change="titleSwitcher-selector-3" data-canedit="true" style="display:block" data-source="group">
<p>Тарифы</p>
</div>
<div class="field-desc" data-change="descSwitcher-selector-3" data-canedit="true" style="display:none" data-source="desc">Небольшое описание</div>
<div class="field-body">
<div class="field-body__item">
<select name="gorod" id="gorod" data-options="500" data-option="0" data-name="Тарифы">
<option value="95" data-option="0" name="Промо" id="promo">Промо</option>
<option value="194" data-option="1" name="Стартовый" id="starter">Стартовый</option>
<option value="387" data-option="2" name="Бизнес" id="biznes">Бизнес</option>
<option value="618" data-option="3" name="Корпоративный" id="coop">Корпоративный</option>
<option value="3300" data-option="4" name="Колл-центр" id="callcentr">Колл-центр</option>
</select>
</div>
</div>
<div class="polzunok-wrap">
<div class="field field-slider">
<div class="field-title size-18" data-change="titleSwitcher-slider-6" data-canedit="true" style="display:block" data-source="group">
<p>SIP линии<br></p>
</div>
</br>
<div id="polzunok-1" class="rangeouter ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
<div class="rangeouter"></div>
<div class="rangeinner" style="width: 0%;"></div>
<span tabindex="0" class="rangeselector ui-slider-handle ui-corner-all ui-state-default" data-ub-title="3" data-ub-pos="top" style="left: 0%;"></span>
<div id="polzunok-1" class="">
<span class="slider-line__num slider-line__num-min" style="left:4.25531914893617%;">5</span>
<span class="slider-line__num" style="left:14.893617021276595%;">10</span>
<span class="slider-line__num" style="left:25.53191489361702%;">15</span>
<span class="slider-line__num" style="left:36.170212765957444%;">20</span>
<span class="slider-line__num" style="left:46.808510638297875%;">25</span>
<span class="slider-line__num" style="left:57.44680851063829%;">30</span>
<span class="slider-line__num" style="left:68.08510638297872%;">35</span>
<span class="slider-line__num" style="left:78.72340425531914%;">40</span>
<span class="slider-line__num" style="left:89.36170212765957%;">45</span>
<span class="slider-line__num slider-line__num-max" style="left:100%; width: 16px;">50</span>
</div>
</div>
</div>
</br>
<div class="field field-slider">
<div class="field-title size-18" data-change="titleSwitcher-slider-6" data-canedit="true" style="display:block" data-source="group">
<p>Обслуживание внешних линий<br></p>
</div>
</br>
<div id="polzunok-2" class="rangeouter ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
<div class="rangeouter"></div>
<div class="rangeinner" style="width: 0%;"></div>
<span tabindex="0" class="rangeselector ui-slider-handle ui-corner-all ui-state-default" data-ub-title="3" data-ub-pos="top" style="left: 0%;"></span>
<div class="">
<span class="slider-line__num" style="left:0%;">1</span>
<span class="slider-line__num" style="left:7.142857142857143%;">2</span>
<span class="slider-line__num" style="left:14.285714285714286%;">3</span>
<span class="slider-line__num" style="left:21.42857142857143%;">4</span>
<span class="slider-line__num" style="left:28.571428571428573%;">5</span>
<span class="slider-line__num" style="left:35.714285714285715%;">6</span>
<span class="slider-line__num" style="left:42.85714285714286%;">7</span>
<span class="slider-line__num" style="left:50%;">8</span>
<span class="slider-line__num" style="left:57.142857142857146%;">9</span>
<span class="slider-line__num" style="left:64.28571428571429%;">10</span>
<span class="slider-line__num" style="left:71.42857142857143%;">11</span>
<span class="slider-line__num" style="left:78.57142857142857%;">12</span>
<span class="slider-line__num" style="left:85.71428571428572%;">13</span>
<span class="slider-line__num" style="left:92.85714285714286%;">14</span>
<span class="slider-line__num" style="left:100%; width: 16px;">15</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>Список содержит 5 тарифов: 1)ПРОМО; 2)СТАРТОВЫЙ; 3)БИЗНЕС; 4)КОРПОРАТИВНЫЙ; 5)Колл-центр.
Минимальные значения по тарифам для 1-ой шкалы: 1)3; 2)5; 3)10; 4)20; 5)30;
Минимальные значения по тарифам для 2-ой шкалы: 1)1; 2)2; 3)3; 4)5; 5)3;
При смещении ползунка, я использую условия такого плана:
$("#polzunok-2").slider({
. . .
else if (ui.value = 10 && ui.value < 20) {
$("#gorod")[0].selectedIndex = 2;
$("#polzunok-2").slider({
value: 3
});
}
. . .
});
Но, как вставить второе значение 2 ползунка в условие, для работы подобного условия:
$("#polzunok-2").slider({
if (ui.value >= 3 && $("#polzunok-1").slider({ui.value >= 30})) {
$("#gorod")[0].selectedIndex = 4;
$("#polzunok-1").slider({
value: 30
});
}
});