Показать сообщение отдельно
  #35 (permalink)  
Старый 12.08.2017, 17:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 7,561

Еще раз - не надо увлекаться идентификаторами, в данном случае, это зло.

Для решения этой задачи (специфики расчета) нужно разбить поля ввода на группы по типу стен используя классы. При этом назначение обработчика полей ввода остается прежним - первое, это обработка ввода, второе расчет площадей.

Шаблон замены запятой на точку при вводе в поле изменен на /[,\.]+/ с прежнего /,/. Я не буду уточнять почему, попробуйте понять сами, можно руководствоваться при этом этим. Не получится, тогда можно и пояснить.

Идентификатором группы является ее класс, он же определяет формулу расчета площадей. Вывод площадей производится циклом, так как их несколько, согласно их индексу в наборе.

При смене единиц перерасчет площадей в этом же обработчике, без триггера. В остальном все осталось прежним, благодаря как раз тому, что обрабатывается сразу коллекция полей и элементов.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function calculate(group, values) {
    var a, b;
    switch(group) {
        case 'rectangle': a = values[0] * values[1], b = values[2] * values[3];
                          return [a, b, a && b ? (a + b) * 2 : 0];
                          break;
        case 'triangle':  a = values[0] * values[1] * .5, b = (values[2] + values[3]) * values[4] * .5;
                          return [a, b, a && b ? (a + b) * 2 : 0];  
    }   
}

$(function() {
    var dim = ['мм',,'м'], //единицы измерения
        side = $('input.rectangle, input.triangle') //получаем и кешируем все поля ввода
        .on('keyup', function() {
            //обработка ввода в поле
            this.value = this.value.replace(/[,\.]+/,'.').replace(/[^\d.]/,'');
                //имя группы определяющее задачи
            var group = this.className,
                //получаем значения всех полей ввода текущей группы
                values = $.map(side.filter('.'+group), function(e) {
                    var v = parseFloat(e.value);
                    return v || 0
                }),
                //получаем текущие единицы измерения
                u = +unit.filter(':checked').val(),
                //производим расчет
                area = calculate(group, values);
                
            //получаем элементы вывода площадей текущей группы и выводим результаты расчета
            $(this).closest('div.'+group).find('.area').each(function(i, e) {
                $(e).text(
                    area[i] ? area[i].toFixed(u) + ' ' + dim[u]+'²' : ''   
                )
            })            
    }), 
    unit = $('[name="unit"]')
        .change(function() {
            var u = +this.value;
            $('.unit').text(dim[u]); 
            side.val(function() {
                //добавлено в свете подумать, почему нужен шаблон /[,\.]+/ вместо /,/
                var v = parseFloat(this.value); 
                if(v) return u
                        ? v / 1000
                        : v * 1000
            });
            //изменить рассчитанные площади в соответствии выбранных единиц
            $('span.area').text(function(i, v) {
                v = parseFloat(v);
               if(v) return (u ? v / 1000 : v * 1000).toFixed(u) + ' ' + dim[u]+'²'    
            })
    });
});
  </script>
</head>
  
<body>
    <label><input type="radio" name="unit" value="2" checked="" /> метры</label>
    <label><input type="radio" name="unit" value="0" /> миллиметры</label>
    <h3>Площадь стен первой комнаты</h3>
    <p>Четыре стены прямоугольные - противоположные стены равны</p> 
    <div class="row plos rectangle">           
        <div class="col-sm-4">
            <h4>Стена 1</h4>
            <div class="st1">Длина стены: </div>
            <div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>
            <div class="st1">Высота стены: </div>
            <div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>  
        </div>
        <div class="col-sm-4">
            <h4>Стена 2</h4>
            <div class="st1">Длина стены: </div>
            <div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>
            <div class="st1">Высота стены: </div>
            <div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>
        </div>
        <div class="col-sm-4">
            Площадь стены 1: <span class="area"></span><br>
            Площадь стены 2: <span class="area"></span><br>
            ПЛОЩАДЬ СТЕН КОМНАТЫ: <span class="area"></span>
        </div>   
    </div>
 
    <h3>Площадь второй комнаты</h3>
    <p>Две стены треугольные, две трапецеобразные. Противоположные стены равны</p>
    <div class="row plos triangle">           
        <div class="col-sm-4">
            <h4>Треугольная стена</h4>
                <div class="st1">Длина основания: </div>
                <div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
                <div class="st1">Высота стены: </div>
                <div class="st2"><input class="triangle" /> <span class="unit">м</span></div>  
        </div>
        <div class="col-sm-4">
                <h4>Стена трапеция</h4>
                <div class="st1">Длина основания: </div>
                <div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
                <div class="st1">Длина потолка: </div>
                <div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
                <div class="st1">Высота стены: </div>
                <div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
        </div>
        <div class="col-sm-4">
            Площадь треугольной стены: <span class="area"></span><br>
            Площадь трапецеобразной стены: <span class="area"></span><br>
            ПЛОЩАДЬ СТЕН КОМНАТЫ: <span class="area"></span>
        </div>   
    </div>  
</body>
</html>

Последний раз редактировалось laimas, 12.08.2017 в 17:43.
Ответить с цитированием