|
Сообщение от MC-XOBAHCK
|
|
может быть ещё зайдёте и подскажите, возможно ли переключатель вынести в отдельную функцию
|
Заглянул, но ничего не понял. Идентификатор вещь хорошая и нужная, но к месту, вы же, даже можно сказать, злоупотребляете им. На поля ввода устанавливается обработчик, а это означает, что как минимум один из них непосредственно в обработчике уже "в наших руках" и при этом творить такое безобразие var a = $('#val_a'), var b = $('#val_b')?
Какая отдельная функция вам нужна, если переключение единиц и так есть отдельная функция, обработчик?
Словами:
Не видно, чтобы требовались сотые доли миллиметров, а значит и в отображении они не нужны. При этом выбор единиц измерения должен изменять как текст, так и определять наличие сотых у величин. Это просто сделать указав значениями кнопок управления единицами величину сотых после запятой - 2 и 0.
В силу того, что методы jQuery возвращают объект, можно определять для объекта множество методов описывая их цепочкой, т.е. получить, установить обработчик, изменить свойство/атрибут и т.п., и т.д. Зачем же размусоливать все?
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var side = $('.side') //получаем и кешируем поля ввода сторон прямоугольника
.on('input keyup', function() { //устанавливаем им обработчик ввода в них
//получаем значение активного поля, удаляем не цифровой ввод в нем, сохраняем в нем эти изменения
this.value = this.value.replace(/[^\d,.]/,'').replace(/,/,'.');
//получаем значение второго поля из ранее кешируемого набора как не равное активному полю
var b = parseFloat(side.not(this).val()),
//получаем состояние кнопок единиц измерения из ранее кешированного их набора и получаем выбранные единицы
u = +unit.filter(':checked').val();
//если в обоих полях введены стороны прямоугольника, рассчитываем площадь с указанием единиц измерения
$('#area').text(
parseFloat(this.value) && b //оба поля заполнены?
? (this.value * b).toFixed(u) //наличие сотых после запятой определяется значением кнопки
+ ' ' + ['мм²',,'м²'][u] //единица измерения из массива, по индексу равному значению кнопки
: '' //одно или оба поля не заполнены, очищаем вывод площади
)
}),
unit = $('[name="unit"]') //получаем и кешируем кнопки выбора единиц измерения
.change(function() { //устанавливаем обработчик выбора единиц
var u = +this.value; //значение выбранных единиц
//установим выбранные единицы у полей сторон из массива по индексу, которым является значение выбранной кнопки
$('.unit').text(['мм',,'м'][u]);
//изменить значение полей сторон (ранее кешированные) на выбранные единицы измерения
side.val(function() {
if(parseFloat(this.value)) //поле заполнено? в противном случае поле будет очищено
return u //выбраны метры?
? this.value / 1000 //да, значение поля делим на миллиметры
: this.value * 1000 //нет, значение поля умножаем на миллиметры
}).
trigger('keyup') //произвести перерасчет площади согласно выбранным единицам измерения
});
});
</script>
</head>
<body>
<div>
<h4>Прямоугольник</h4>
<label><input type="radio" name="unit" value="2" checked="" /> метры</label>
<label><input type="radio" name="unit" value="0" /> миллиметры</label>
<p>Длина прямоугольника: <input class="side" /> <span class="unit">м</span></p>
<p>Ширина прямоугольника: <input class="side" /> <span class="unit">м</span></p>
<div>Площадь прямоугольника: <span id="area"></span></div>
</div>
</body>
</html>