Калькулятор на сайт
Приветствую всех, друзья! Кто может помочь, я начинающий программист.
Возникла задача написать простенький калькулятор для сайта продающего фотообои. Чтоб клиент вводил высоту и ширину обоев в квадратных метра, выбирал материал и итог уже выводился в погонных метрах, т.к. у каждого материала разные погонные метры. Я нашел подходящий скрип, подпилил под нужды, но не могу сделать, чтоб квадратные метры переводились в погонные для каждого материала, когда пользователь кликал на нужный ему материал. Вот код, может кто подскажет как это сделать? <section class="section"> <div class="container"> <p class="h1 text-center">Калькулятор расчета стоимости услуг</p> <div class="small-line"></div> <div class="row price"> <div class="col-md-4 col-md-offset-4"> <div class="list-group calculator"> <div class="list-group-item name-price"><h3>Стоимость печати</h3></div> <div class="list-group-item box-price"> <div class="box-filter" data-price="1000"> <div class="form-group"> <label>Площадь фотообоев</label> <div class="row"> <div class="col-md-4" style="padding-top: 14px;">В метрах:</div> <div class="col-md-3"><input type="text" name="roof" class="form-control" id="roof" value="" placeholder="0"> ш</div> <div class="col-md-3"><input type="text" name="roof1" class="form-control" id="roof1" value="" placeholder="0"> в</div> </div> </div> <div class="form-group"> <label>Материал</label> <ul class="parametrs" id="pol"> <li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "под иней")</li> <li class="label label-default" data-param="1.1">Бумажные фотообои с ПВХ покрытием (текстура "под древний папирус")</li> <li class="label label-default" data-param="1.2">Бумажные фотообои с ПВХ покрытием (текстура "под текстиль")</li> <li class="label label-default" data-param="1.4">Бумажные фотообои с ПВХ покрытием (текстура "живопись маслом")</li> <li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "песок")</li> <li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "лен")</li> <li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "влажная штукатурка")</li> <li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "штукатурка")</li> <li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "мелкий песок")</li> <li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "гладкая")</li> </ul> <ul class="parametrs" id="fliz"> <li class="label label-default" data-param="1">Флизелиновые фотообои (текстура "венецианская штукатурка")</li> <li class="label label-default" data-param="0.95">Флизелиновые фотообои (текстура "штукатурка")</li> <li class="label label-default" data-param="1.15">Флизелиновые фотообои (текстура "штукатурка")</li> <li class="label label-default" data-param="1.2">Штукатурка с покраской</li> </ul> </div> </div><!-- /.box-filter --> </div> <div class="list-group-item footer-price"> <button type="button" class="btn-outlined btn-lg btn-default price-button">Рассчитать стоимость</button> </div> </div> </div> </div> </div> </section> $(document).ready(function () { $('.price-button').click(function() { var boxPrice = $(this).closest('.col-md-4'); function hideButton () { $(boxPrice).find('.price-button').hide(); $(boxPrice).find('.footer-price').append('<h4>Итог: <span class="cur"></span> <span class="rub">р. </span></h4>'); }; $(boxPrice).find('.box-price').animate({height: '550px'}, {'duration': 500}, {'easing': 'linear'}, hideButton()); }); $('ul.parametrs li').click(function() { var listParam = $(this).closest('ul.parametrs'); $(listParam).find('li.check-param').removeClass('check-param'); var elemParam = $(this); $(elemParam).addClass('check-param'); var elemAttr = $(elemParam).attr('data-param'); }); function valParam () { var Price = $('.box-filter').attr('data-price'); var roofValue = $('#roof').val(); var roofValue1 = $('#roof1').val(); var roofValue2 = roofValue * roofValue1; var paramValuePol = $('#pol').find('li.check-param').attr('data-param'); var paramValueSteny = $('#steny').find('li.check-param').attr('data-param');/ if ($.isNumeric(roofValue2)) { if (!$.isNumeric(roofValue2)) roofValue2 = 1; if (!$.isNumeric(paramValuePol)) paramValuePol = 1; if (!$.isNumeric(paramValueSteny)) paramValueSteny = 0; var total = Price * roofValue2 * paramValuePol + paramValueSteny;//формула расчета общей стоимости var newTotal = Math.round(total);//округление $('.cur').html(newTotal); $('.rub').show(); }; }; $('.calculator').on('click keyup', valParam); }) Например у флизилиновых обоев погонный метр 0,75, а у ПВХ 1,3 Вот примерная формула = Ширина/ширина материала*высота(высота в метрах квадратных)*цена. Как в JS менять параметр "ширина материала" при выборе нужного значения пользователем. Подскажите пожалуйста, заранее благодарен! |
Часовой пояс GMT +3, время: 11:10. |