Сообщение от MC-XOBAHCK
|
не всё мне в коде понятно
|
О логике кода я писал много, а по конкретике, это почитать о функциях jQuery. Что не понятно?
Сообщение от MC-XOBAHCK
|
При вводе размеров будь то в миллиметрах или метрах - в результате я хотел бы иметь метры квадратные
|
Тоже не проблема. Я не буду приводить html код, только JS. Так как выводит квадраты как '²' или '.кв', это для любых единиц измерения, то данную опцию внесем из объектов массива dim в переменную sqr. Свойство mul этих объектов теперь будет выполнять иную роль - корректировать рассчитанные площади до метров кв.
Добавим единицами измерения и сантиметры. Это исключительно для примера, и можно не применять, думаю понятно будет как. Когда было две единицы, то было просто, а если три, то нужно запоминать текущие единицы, чтобы корректно преобразовывать значения в полях для выбранных единиц. Запоминание текущих единиц в переменную dir производится в момент нажатия мыши на копки выбора единиц (значения выбранной кнопки). В время смены единиц из запомненных единиц и выбранных формируется строка, по которой как свойству объекта mul получается множитель на который производится коррекция значений в полях ввода.
Код кнопок управления такой:
<label><input type="radio" name="unit" value="0" checked="" /> метры</label>
<label><input type="radio" name="unit" value="1" /> сантиметры</label>
<label><input type="radio" name="unit" value="2" /> миллиметры</label>
Расчеты прямоугольников, треугольников и ... вынесены в функции.
function rectangle(a, b) {
return a * b
}
function triangle(a, b) {
return a * b * .5
}
function trapeze(a, b, c) {
return (a + b) * c * .5
}
function calculate(g, v) {
var a, b;
switch(g) {
case 'rectangle': a = rectangle(v[0], v[1]), b = rectangle(v[2], v[3]);
return [a, b, a && b ? (a + b) * 2 : 0];
break;
case 'triangle': a = triangle(v[0], v[1]), b = trapeze(v[2], v[3], v[4]);
return [a, b, a && b ? (a + b) * 2 : 0];
break;
case 'pyramid': a = triangle(v[0], v[1]), b = triangle(v[0], v[2]);
return [a, b, rectangle(v[1], v[2]), a && b ? (a + b) * 2 : 0];
}
}
$(function() {
var dir, //предыдущее состояние единиц измерения
sqr = '²', //символ кдаратных значений
mul = { //множетели единиц измерения для полей ввода в зависимости от предыдущего и нового состояния
'01': 100,
'12': 10,
'02': 1000,
'10': .01,
'21': .1,
'20': .001
},
dim = [{unt: 'м', dec: 2, mul: 1}, {unt: 'см', dec: 0, mul: .0001}, {unt: 'мм', dec: 0, mul: .000001}],
side = $('input:text')
.on('keyup', function() {
this.value = this.value.replace(/[,\.]+/,'.').replace(/[^\d.]/,'');
var u = unit.filter(':checked').val();
//расчет площадей для всех заполненных полей
$('[data-area]').each(function() {
//группу определяет атрибут data-area
var group = $(this).data('area'),
values = $.map(side.filter('.'+group), function(e) {
var v = parseFloat(e.value);
return v || 0
}),
area = calculate(group, values);
$(this).find('.area').each(function(i, e) {
$(e).text(
//вывод площадей в метрах
area[i] ? (area[i] * dim[u].mul).toFixed(2) + ' м' + sqr : ''
)
})
})
}),
unit = $('input:radio')
.change(function() {
var u = this.value, //выбранные единицы измерения
d = dir + u; //множитель единиц в зависимоти от прежнего их состояния
$('.unit').text(dim[u].unt);
side.val(function() {
var v = parseFloat(this.value);
if(v) return (v * mul[d]).toFixed(dim[u].dec)
}).trigger('keyup');
})
.parent() //получить родителей - label
.mousedown(function() { //запомнить текущие единицы измерения при нажатии мыши на label
dir = unit.filter(':checked').val()
}).end(); //вернуться к кнопкам radio
});
Интересная комната, на крышу похожа.
Может быть для такой конфигурации иметь высоту до конька и высоты для сторон рассчитывать, а не вводить для каждой? Ведь "на глазок" ввести значение чтобы все срослось не трудно ли будет?