Здравствуйте! Я снова к вам со своими глупыми вопросами : (
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.st1 {display: inline-block;margin-top: 8px;width: 80px;text-align: right;}
.st2 {display: inline-block;}h4 {color: #c3410d;}input {width: 110px;}
input[type="radio"] {width: 25px;}
.col-sm-4 {width:220px;display:inline-block;border:solid 1px #888;padding:5px;margin-left:10px;background:#eee;}
.col-sm-6 {width:250px;display:inline-block;border:solid 1px #888;padding:5px;margin-left:10px;background:#eee;}
</style>
<script>
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, c, d, e, f;
switch(g) {
case 'figura': a = trapeze(v[0], v[1], v[2]), b = triangle(v[3], v[4]), c = trapeze(v[5], v[6], v[7]), d = trapeze(v[8], v[9], v[10]), e = trapeze(v[11], v[12], v[13]);
return [a, b, c, d, e, a && b && c && d && e ? (a + b + c + d + e) : 0];
break;
}
}
$(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() {
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()
.mousedown(function() {
dir = unit.filter(':checked').val()
}).end();
});
</script>
</head>
<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>
<h3>Площадь</h3>
<div class="row plos" data-area="figura">
<div class="col-sm-4">
<h4>Сигмент 1</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<h4>Сигмент 2</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<h4>Сигмент 3</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
</div>
<div class="col-sm-4">
<h4>Сигмент 4</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<h4>Сигмент 5</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" /><span class="unit"> м</span></div>
</div>
<div class="col-sm-6">
<img src="http://i.piccy.info/i9/5dc9e1044199780a5c682345c5e8e242/1503672360/7796/1170341/G_111.jpg" style="margin-bottom: 5px;" /><br>
Площадь 1 сигмента: <span class="area"></span><br>
Площадь 2 сигмента: <span class="area"></span><br>
Площадь 3 сигмента: <span class="area"></span><br>
Площадь 4 сигмента: <span class="area"></span><br>
Площадь 5 сигмента: <span class="area"></span><br>
<div class="rezultat ">ПЛОЩАДЬ всей фигуры = <span class="area"></span></div>
</div>
</div>
В общем, не покидает меня мысль к калькулятору добавить автозаполнение значения для смежного размера.
Есть у меня инпуты, которые по сути - это один и тот же размер. Можно ли реализовать чтобы при заполнении пользователем одного инпута, значение автоматически добавлялось в равный ему инпут?
Например в этом варианте расчёта у меня:
сиг1стор2 = сиг3стор2
сиг4стор2 = сиг5стор2
В другом варианте (расчёт по сторонам через полупериметры) - все стороны имеют дублёра кроме тех что являются контуром всей фигуры.
Думаю первое с чего стоит начинать - это добавить уникальный класс к одинаковым инпутам, так как здесь дали совет не увлекаться с Id.
Потом нужно отдельной функцией делать, где брать значение инпута и через if если оно > 0, то... вот здесь я и приплыл.
Можно вообще такое реализовать? Если да, пните пожалуйста куда хоть смотреть, в JavaScript или в jQuery?
