Создаю калькулятор. После блока "Перила" необходимо, чтобы складывались значения, а они умножаются. В чем ошибка?
$(document).ready(function () {
//Заменяем кнопку <button>рассчитать стоимость</button> на <span class="cur"></span>, в который будет подставляться рассчитанная сумма
$('.price-button').click(function () {
var boxPrice = $(this).closest('.price-inner');
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: '1800px'
}, {
'duration': 500
}, {
'easing': 'linear'
}, hideButton());
});
//отслеживаем выделение параметра, чтобы в блоке был только 1 выделенный элемент
$('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 paramValuePoroda = $('#poroda').find('li.check-param').attr('data-param');
var roofValue = $('#roof').val(); //вычисляем длину лестницы
var paramValueMarch = $('#heightMarch').val(); //вычисляем ширину марша
var paramValueNumberSteps = $('#humberSteps').val(); //вычисляем Общее количество ступеней
var paramValueRailing = $('#railing').find('li.check-param').attr('data-param'); // Перила
var paramValueTypeStairs = $('#typeStairs').find('li.check-param').attr('data-param'); // Тип лестницы
var paramValueTypeTurn = $('#typeTurn').find('li.check-param').attr('data-param'); // Тип поворота
var paramValueTypeStage = $('#typeStage').find('li.check-param').attr('data-param'); // пригласительная ступень
var paramValuePodstupenniki = $('#podstupenniki').find('li.check-param').attr('data-param'); // Подступенники
var paramValuePainting = $('#painting').find('li.check-param').attr('data-param'); // покраска
var paramValueMounting = $('#mounting').find('li.check-param').attr('data-param'); // монтаж
if ($.isNumeric(roofValue)) {
if (!$.isNumeric(paramValuePoroda)) paramValuePoroda = 1;
if (!$.isNumeric(roofValue))
roofValue = 1;
if (!$.isNumeric(paramValueMarch))
paramValueMarch = 1;
if (!$.isNumeric(paramValueNumberSteps))
paramValueNumberSteps = 1;
if (!$.isNumeric(paramValueRailing))
paramValueRailing = 1;
if (!$.isNumeric(paramValueTypeStairs))
paramValueTypeStairs = 1;
if (!$.isNumeric(paramValueTypeTurn))
paramValueTypeTurn = 1;
if (!$.isNumeric(paramValueTypeStage))
paramValueTypeStage = 1;
if (!$.isNumeric(paramValuePodstupenniki))
paramValuePodstupenniki = 1;
if (!$.isNumeric(paramValuePainting))
paramValuePainting = 1;
if (!$.isNumeric(paramValueMounting))
paramValueMounting = 1;
var total = Price * paramValuePoroda * roofValue * paramValueMarch * paramValueNumberSteps * paramValueRailing * paramValueTypeStairs * paramValueTypeTurn * paramValueTypeStage * paramValuePodstupenniki * paramValuePainting * paramValueMounting; //формула расчета общей стоимости
var newTotal = Math.round(total);
$('.cur').html(newTotal);
$('.rub').show();
};
};
//отслеживаем изменение данных
$('.calculator').on('click keyup', valParam);
})
.container-cal {
width: 800px;
margin: 25px auto;
position: relative;
font-family:'Segoe UI', sans-serif;
position: relative;
}
.name-price {
background: #4169E1;
color: #fff;
text-align: center;
padding: 20px 0;
}
.name-price h3 {
font-size: 26px;
text-align: center;
}
.box-price {
background: #DDDDDD;
color: #333;
padding: 0 15px;
overflow: hidden;
height: 0px;
}
.box-filter {
padding: 0px 0;
}
.form-group {
text-align: center;
padding: 15px 0 25px;
border-bottom: 1px solid #000;
}
.form-group label {
text-align: left;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
display: inline-block;
vertical-align: top;
}
ul.parametrs {
padding: 0;
text-align: center;
}
ul.parametrs li {
cursor: pointer;
}
ul.parametrs > li {
display: inline-block;
vertical-align: top;
padding: 5px 10px;
}
ul.parametrs .check-param {
background-color: #f00;
color: #FFF;
}
.footer-price {
background: #2E8B57;
text-align: center;
color: #FFF;
padding: 25px 0;
}
input[type="text"], select {
width: 300px;
height: 45px;
border: 1px solid #ddd;
padding: 10px 15px;
box-sizing: border-box;
}
.price-button {
border: 1px solid #FFF;
color: #FFF !important;
font-size: .875em;
color: #cacaca;
padding: 10px 40px;
font-weight: normal;
text-align: center;
background: none;
border: 1px solid #cacaca;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
white-space: nowrap;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
outline: 0;
}
.price-button:hover {
border-color: transparent;
background: #FFFFFF;
color: #fff;
color: #333!important;
text-shadow: none;
}
.cur {
font-size: 36px;
}
.rub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container-cal">
<div class="price">
<div class="price-inner">
<div class="calculator">
<div class="name-price">
<h3>Калькулятор расчета стоимости услуг</h3>
</div>
<div class="box-price">
<div class="box-filter" data-price="3000">
<div class="form-group">
<label>Порода дерева</label>
<ul class="parametrs" id="poroda">
<li class="label check-param" data-param="1">сосна</li>
<li class="label" data-param="1.636666666666667">лиственница</li>
<li class="label" data-param="2.546">бук</li>
<li class="label" data-param="3.4553333333333333333333333333333333">дуб</li>
</ul>
</div>
<div class="form-group">
<label for="roof">Длина лестницы (В метрах погонных:)</label>
<div class="row">
<input type="text" name="roof" class="form-control" id="roof" value="" placeholder="0">
</div>
</div>
<div class="form-group">
<label>Ширина марша</label>
<div class="row">
<select id="heightMarch" name="march">
<option selected>Ширина марша<option>
<option value="1.9">0.9<option>
<option value="2.2">1<option>
<option value="2.5">1.1<option>
<option value="2.8">1.2<option>
<option value="3.1">1.3<option>
<option value="3.4">1.4<option>
<option value="3.7">1.5<option>
<option value="4">1.6<option>
<option value="4.3">1.7<option>
<option value="4.7">1.8<option>
<option value="5">1.9<option>
<option value="5.3">2<option>
</select>
</div>
</div>
<div class="form-group">
<label>Общее количество ступеней</label>
<div class="row">
<select id="humberSteps" name="steps">
<option selected>количество ступеней<option>
<option value="1">5<option>
<option value="1.1">6<option>
<option value="1.2">7<option>
<option value="1.3">8<option>
<option value="1.4">9<option>
<option value="1.5">10<option>
<option value="1.6">11<option>
<option value="1.7">12<option>
<option value="1.8">13<option>
<option value="1.9">14<option>
<option value="2">15<option>
<option value="2.1">16<option>
<option value="2.2">17<option>
<option value="2.3">18<option>
<option value="2.4">19<option>
<option value="2.5">20<option>
<option value="2.6">21<option>
<option value="2.7">22<option>
<option value="2.8">23<option>
<option value="2.9">24<option>
<option value="3">25<option>
<option value="3.1">26<option>
<option value="3.2">27<option>
<option value="3.3">28<option>
<option value="3.4">29<option>
<option value="3.5">30<option>
<option value="3.6">31<option>
<option value="3.7">32<option>
<option value="3.8">33<option>
<option value="3.9">34<option>
<option value="4">35<option>
<option value="4.1">36<option>
<option value="4.2">37<option>
<option value="4.3">38<option>
<option value="4.4">39<option>
<option value="4.5">40<option>
</select>
</div>
</div>
<div class="form-group">
<label>Перила</label>
<ul class="parametrs" id="railing">
<li class="label" data-param="2.08">по внутренне стороне</li>
<li class="label" data-param="3.16">по двум сторонам</li>
</ul>
</div>
<div class="form-group">
<label>Тип лестницы</label>
<ul class="parametrs" id="typeStairs">
<li class="label" data-param="1.41">на 90 градусов</li>
<li class="label" data-param="1.5466666666666667">на 180 градусов</li>
</ul>
</div>
<div class="form-group">
<label>Тип поворота</label>
<ul class="parametrs" id="typeTurn">
<li class="label" data-param="1.3">площадка</li>
<li class="label" data-param="1.45">забежные ступени</li>
</ul>
</div>
<h2>Дополнительные параметры</h2>
<div class="form-group">
<label>пригласительная ступень</label>
<ul class="parametrs" id="typeStage">
<li class="label" data-param="1">нет</li>
<li class="label" data-param="1.183333333333333333333333333333333333333333">да</li>
</ul>
</div>
<div class="form-group">
<label>Подступенники</label>
<ul class="parametrs" id="podstupenniki">
<li class="label" data-param="1">нет</li>
<li class="label" data-param="1.533333333333333333333333333333333333333333">да</li>
</ul>
</div>
<div class="form-group">
<label>покраска</label>
<ul class="parametrs" id="painting">
<li class="label" data-param="1">без покраски</li>
<li class="label" data-param="12.66666666666667">покраска в цвет с лаком</li>
<li class="label" data-param="11">покраска бесцветным лаком</li>
</ul>
</div>
<div class="form-group">
<label>монтаж</label>
<ul class="parametrs" id="mounting">
<li class="label" data-param="1">нет</li>
<li class="label" data-param="4.333333333333333333333333333333333333333333">да</li>
</ul>
</div>
</div>
</div>
<div class="footer-price">
<button type="button" class="price-button">Рассчитать стоимость</button>
</div>
</div>
</div>
</div>
</div>
var total = Price * paramValuePoroda * ... * paramValueMounting;
, в которой перемножается "вагон" значений. Если вы используете только умножение, то неудивительно, что значения перемножаются. Если вам нужно складывать значения, то используйте для этого сложение. – Regent 15 июл '15 в 11:21<option value="3.4">29<option>
вместо<option value="3.4">29</option>
- грустное дело. Хотя бы потому, что из-за этого нельзя автоматически отформатировать ваш HTML-код, а вручную его править - слишком долго. – Regent 15 июл '15 в 11:33