а можно принудительно задать конкретные значения в js-скрипте? через условия if?
т.е. конкретно прописать: если значение меньше 1000, то присвоить checked первой радиокнопке. если значение меньше 3000, отметить вторую радиокнопку. и значение меньше 5000 - третья радиокнопка. <input type="radio" name="plan" value="{$k}" checked="checked"> <input type="text" name="sum" id="calc_sum" class="minCost" value=""/> var plan = $('input[name=plan]'); // input с планами, values = {$k} - это счётчик планов (0,1,2) var input = $('input.minCost'); // текстовое поле - ввести число от 100 до 5000 if (input.val() < 1000){ (plan.val(0)).prop('checked', true); } if (input.val() < 3000){ (plan.val(1)).prop('checked', true); } if (input.val() < 5000){ (plan.val(2)).prop('checked', true); } этот код не работает. что нужно исправить? |
tp-20,
var input = $('input.minCost'); // текстовое поле - ввести число от 100 до 5000 var plan = $('input[name=plan]'); // input с планами, values = {$k} - это счётчик планов (0,1,2) plan.eq(0).prop('checked', true); if (+input.val() > 3000){ plan.eq(2).prop('checked', true); } if (+input.val() > 1000){ plan.eq(1).prop('checked', true); } |
рони,
выдаёт ошибку TypeError: this.options.values is null, ссылаясь на jquery-ui по этому адресу: https://code.jquery.com/ui/1.12.1/jquery-ui.js jquery-ui.js (строка 14839, столбец 35) Соответственно, скрипт не работает |
Цитата:
|
Приветствую!
Калькулятор тот же, только слегка видоизменённый)) Поэтому новую тему создавать не буду..) Что имеем: двигаем ползунок - меняется значение в инпуте и в блоке "доход в день и в месяц". Что надо: когда вручную вводим число в инпут, в блоке "доход в день и в месяц" значения не меняются, хотя ползунок перемещается. Как это сделать? ![]() <div> <input type="text" class="main-tariffs-calc-value main-tariffs-calc-value-1" value="10000"> // инпут, куда вручную вводим значение <div class="main-tariffs-calc-slider-1"></div> // ползунок (слайдер) </div> <div> <div>Доход за сутки:</div> <div><input type="text" value="100" class="daily-value-1"> USD</div> </div> <div> <div>Доход за месяц:</div> <div><input type="text" value="3000" class="month-value-1"> USD</div> </div> <div> <div>Итоговый доход:</div> <div><input type="text" value="70000" class="total-value-1"> USD</div> </div> var input = $('input.main-tariffs-calc-value-1'); var slider = $('.main-tariffs-calc-slider-1').slider({ range: 'min', min: 500, max: 50000, value: [10000], step: 500, animate: 500, slide : function(event, ui) { slider_value = input.val(ui.value); // это значение ползунка slider_value = Number(slider_value.val()); // явно преобразуем его в число //console.log(slider_value); daily_value = Number($('.daily-value-1').val()); // инпут для значения прибыли за 1 день daily_value = slider_value * 1.8/100; $('.daily-value-1').val(daily_value); // динамически выводим новое значение (при движении ползунка) month_value = ($('.month-value-1').val()); // инпут для значения прибыли за 1 месяц month_value = slider_value * 1.8/100*30; $('.month-value-1').val(month_value); // динамически выводим новое значение (при движении ползунка) total_value = Number($('.total-value-1').val()); // инпут для значения итоговой прибыли total_value = slider_value * 1.8/100*70 + slider_value; $('.total-value-1').val(total_value); // динамически выводим новое значение (при движении ползунка) } }); input.on('change', function() { slider.slider('value', $(this).val()); }); $('.main-tariffs-calc-value-1').text($('.main-tariffs-calc-slider-1').slider('value')); |
tp-20,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { var input = $('input.main-tariffs-calc-value-1'); var slider = $('.main-tariffs-calc-slider-1').slider({ range: 'min', min: 500, max: 50000, value: [10000], step: 500, animate: 500 }); $('.main-tariffs-calc-slider-1').on( "slide", function( event, ui ) { if(ui) slider_value = input.val(ui.value); // это значение ползунка slider_value = Number(input.val()); // явно преобразуем его в число //console.log(slider_value); daily_value = Number($('.daily-value-1').val()); // инпут для значения прибыли за 1 день daily_value = slider_value * 1.8/100; $('.daily-value-1').val(daily_value); // динамически выводим новое значение (при движении ползунка) month_value = ($('.month-value-1').val()); // инпут для значения прибыли за 1 месяц month_value = slider_value * 1.8/100*30; $('.month-value-1').val(month_value); // динамически выводим новое значение (при движении ползунка) total_value = Number($('.total-value-1').val()); // инпут для значения итоговой прибыли total_value = slider_value * 1.8/100*70 + slider_value; $('.total-value-1').val(total_value); // динамически выводим новое значение (при движении ползунка) } ); input.on('change', function() { slider.slider('value', $(this).val()); $('.main-tariffs-calc-slider-1').trigger('slide'); }); $('.main-tariffs-calc-value-1').text($('.main-tariffs-calc-slider-1').slider('value')); }); </script> </head> <body> <div> <input type="text" class="main-tariffs-calc-value main-tariffs-calc-value-1" value="10000"> // инпут, куда вручную вводим значение <div class="main-tariffs-calc-slider-1"></div> // ползунок (слайдер) </div> <div> <div>Доход за сутки:</div> <div><input type="text" value="100" class="daily-value-1"> USD</div> </div> <div> <div>Доход за месяц:</div> <div><input type="text" value="3000" class="month-value-1"> USD</div> </div> <div> <div>Итоговый доход:</div> <div><input type="text" value="70000" class="total-value-1"> USD</div> </div> </body> </html> |
Рони, спасибо, как всегда молниеносный точный ответ!
Вы вынесли slide отдельно, чтобы можно было поставить условие if? $('.main-tariffs-calc-slider-1').on( "slide", function( event, ui ){ И вы ещё добавили trigger - за что он здесь отвечает? или что выполняет? спасибо input.on('change', function() { slider.slider('value', $(this).val()); $('.main-tariffs-calc-slider-1').trigger('slide'); }); |
Цитата:
|
Калк и код тот же.
Подскажите, как сделать изменение значений при вводе в input? Сейчас значения меняются по нажатию на Enter или когда input теряет фокус. А нужно - непосредственно при вводе цифр в input Менял change на onkeypress и на oninput - без изменений input.on('change', function() { slider.slider('value', $(this).val()); $('.main-tariffs-calc-slider-1').trigger('slide'); }); Скриншот для наглядности: ![]() |
Цитата:
|
Часовой пояс GMT +3, время: 20:13. |