15.08.2017, 13:19
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Я же в коде писал комментарии к тем частям его, которые были изменены. И было написано, что родительский блок групп полей ввода связывается со своей группой теперь не по классу, а по атрибуту data-area, так как ваши DIV имеют не одно имя класса. По этому атрибуту как селектору и находятся данные DIV в строке 044 кода, и из этого атрибута получается и имя группы в строке 045 кода. А вы имя группы прописали в класс DIV, поэтому и не работает. Заменить
<div class="row plos g_roof">
на
<div class="row plos" data-area="g_roof">
и все будет работать. |
|
15.08.2017, 13:47
|
 |
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
Вот же блин, тупая моя голова... По другим фигурам делал правильно, а здесь пропустил. Я ещё умудрился ночью с ошибкой в консоли, указывающей на конкретную строку, просидеть два часа прежде чем осознал что пропустил закрывающую скобку в конце строки:
case 'triangle': a = triangle(v[0], v[1]), b = trapeze(v[2], v[3], v[4]);
|
|
15.08.2017, 14:03
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
О карте изображения. Должна быть одна карта, та что показана первой, вторая это нечто.... У вас четыре ската на изображении, значит и столько же областей на карте:
<map name="Map" id="Map">
<area id="rect-1" title="скат 1" shape="poly" coords="13,10,238,9,239,55,60,55" />
<area id="rect-2" title="скат 2" shape="poly" coords="60,55,239,54,239,100,104,100" />
<area id="rect-3" title="скат 3" shape="poly" coords="60,55,103,97,104,160,60,160" />
<area id="rect-4" title="скат 4" shape="poly" coords="13,10,60,55,60,160,13,160" />
</map>
Атрибут href им совсем не нужен, переходов по ним же вы не планируете. Имя ската нужно помещать в title, а не в alt, назначение alt иное. Если связывать области со скриптом (объектом описывающем введенные размеры и т.п.), то задать им идентификаторы. Добавьте в секцию $(function() { }); такой код:
$('#Map area').click(function() {
alert(this.id)
}).mouseenter(function() {
alert('Показать введенные размеры')
});
и щелчок по области отобразит ее ID. А в реалии это показать форму и заполнить ее данными из связанного объекта, если размеры уже вводились, а также просчитать площадь (можно при вводе просчитанную запоминать, а не просчитывать постоянно).
Сложнее будет с маркированием, то есть окрасить, так как это изображение (но сделать можно), но на первых порах (для освоения) достаточно при наведении на область отображать уже введенные значения (как показано в коде). Можно над областями такими их прописать, что и будет являться признаком заполнения параметров ската.
Более гибкое решение, это SVG.
Последний раз редактировалось laimas, 15.08.2017 в 14:36.
|
|
15.08.2017, 17:05
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
|
Спасибо! Теперь я понял идею карты. Функцию подключил - работает. Пока её скрыл под комментарием. Чуть позже вернусь к её наполнению. Посмотрю jQuery, а там решу делать её на клике или mouseenter.
Скажите, я правильно понял что к сегментам карты нельзя прицепить стили? Думал hover задать, да не тут то было.
Вопросы в теме пока прекращаю. Следующий мой вопрос только после того как заработаю первый плюс (помогу кому то другому). А пока буду рядом - читать форум и штудировать учебник сайта.
|
|
15.08.2017, 18:07
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от MC-XOBAHCK
|
|
я правильно понял что к сегментам карты нельзя прицепить стили?
|
Карта изображения, это области на нем, а не некие слои. Чтобы иметь карту со стилями поступают иначе - фоновое изображение перекрывается сломи с абсолютным позиционированием. К ним можно применять стили, включая и трансформации.
Можно посредством canvas работать с копией изображения. |
|
25.08.2017, 17:43
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
Здравствуйте! Я снова к вам со своими глупыми вопросами : (
<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?
Последний раз редактировалось MC-XOBAHCK, 25.08.2017 в 17:48.
|
|
25.08.2017, 18:12
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от MC-XOBAHCK
|
|
при заполнении пользователем одного инпута, значение автоматически добавлялось в равный ему инпут
|
|
Сообщение от MC-XOBAHCK
|
|
все стороны имеют дублёра
|
А что такое равнозначный инпут?
Представим что крыша в основании квадрат и имеет форму правильно пирамиды. Значит все четыре ската будут равны. Чтобы рассчитать площадь скатов нужно ли запрашивать у пользователя ввод значений для каждого ската, то есть иметь "равнозначные инпуты"?
О чем речь? |
|
25.08.2017, 19:11
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
У меня так и есть, для правильной пирамиды в одном случае ввод только двух размеров - основание и высота, во втором случае три размера - грани треугольника (расчёт через полуперимметр). Я первый от второго варианта планирую разделить табами.
А вот в таком варианте все скаты разные:
Только каждый конёк нужно вводить по два раза. Получается инпут ската1стор2 = инпуту ската3стор2 и
ск4стор2 = ск5стор2
Вся крыша разбита на скаты. Так же и запрос размеров разделён группами по скатам, чтобы не запутаться.
Меня интересует, можно ли реализовать что при введении значения конька из ската 4 (Сторона 2), это же значение автоматически появлялось в поле ската 5 (сторона 2). Я это обозвал как равнозначный инпут.
Убирать из ската5 сторону2 (повторяющийся размер) я не хочу, так как его отсутствие запутывает. Удобно когда видишь фигуру ската и есть поля под все размеры, так лучше восприятие и вдруг что удобно проверять правильность введённых размеров.
Взять ту же раскладку из проекта крыши - там чертят скаты и при этом проставляют все размеры.
Добавлю скрин. Можно ли сделать так, что если я ввожу в поле значение, чтобы оно автоматом появлялось и другом поле. Такое реализуемо на JavaScript или jQuery?
Последний раз редактировалось MC-XOBAHCK, 25.08.2017 в 19:33.
|
|
25.08.2017, 20:05
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от MC-XOBAHCK
|
|
Можно ли сделать так, что если я ввожу в поле значение, чтобы оно автоматом появлялось и другом поле.
|
Можно конечно, если в группе таким полям добавить еще одно имя класса, например pair, и для них написать обработчик, изменение в одном из них будет искать в группе поле с имеющее такой класс и помещать в него (их) вводимое значение.
Можно и иначе поступить - Сегмент 4 и Сегмент 5, это одна группа, у которой одно поле общее (Сторона 2). |
|
25.08.2017, 20:30
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
|
Спасибо за ответ! Думаю мне подойдёт вариант с добавлением ещё одного имени класса.
Извините меня за надоедливость и непонятную формулировку вопросов.
Постараюсь больше не тупить и находить ответы в поиске и гугле.
|
|
|
|
