Настройка калькулятора
Добрый день, на сайте есть простенький калькулятор, который не работает(. Прошу помощи в настройке, так как сам в js совсем не соображаю. Заранее Спасибо тем, кто не останется равнодушным и поможет!
Задача такова: 1. При выборе глубины скважины * тип трубы = Стоимость скважины 2. При выборе типа обустройства = Стоимость обустройства 3. Стоимость скважины + Стоимость обустройства = Итого
jQuery(function(){
var ts = new Date(2016, 3, 19,23,0,0,0),
newYear = false;
jQuery('.countdown').countdown({
timestamp : ts
});
});
$(function() {
$( ".sliderIn" ).slider({
max: 150,
min: 0,
step:1,
value:0,
range:'min',
slide: function( event, ui ) {
$( ".inCount" ).val( ui.value );
var a = parseFloat($("#inCount").val());
var b = parseFloat($("#outCount").val());
var c = parseFloat($(".radioList input:checked").val());
var a1 = a*c
var b1 = a1+a-b
var c1 = b1*12
var a11 = a.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
var b11 = b1.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
var c11 = c1.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
jQuery("#inMon").text(a11+' руб.');
jQuery("#outMon").text(b11+' руб.');
jQuery("#sumMon").text(c11+' руб.');
jQuery(".invested .interBox").height(a/20000);
jQuery(".received .interBox").height(b1/20000);
}
});
$( ".inCount" ).val( $( ".sliderIn" ).slider( "value" ) );
});
$(function() {
$( ".sliderOut" ).slider({
max: 450000,
min: 0,
step:1000,
value:50000,
range:'min',
slide: function( event, ui ) {
$( ".outCount" ).val( ui.value );
var a = parseFloat($("#inCount").val());
var b = parseFloat($("#outCount").val());
var c = parseFloat($(".radioList input:checked").val());
var a1 = a*(c/100)
var b1 = a1+a-b
var c1 = b1*12
var a11 = a.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
var b11 = b1.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
var c11 = c1.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
jQuery("#inMon").text(a11+' руб.');
jQuery("#outMon").text(b11+' руб.');
jQuery("#sumMon").text(c11+' руб.');
jQuery(".invested .interBox").height(a/20000);
jQuery(".received .interBox").height(b1/20000);
}
});
$( ".outCount" ).val( $( ".sliderOut" ).slider( "value" ) );
});
$(function() {
var a = parseFloat($("#inCount").val());
var b = parseFloat($("#outCount").val());
var c = parseFloat($(".radioList input:checked").val());
var a1 = a*(c/100)
var b1 = a1+a-b
var c1 = b1*12
var a11 = a.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
var b11 = b1.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
var c11 = c1.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
jQuery("#inMon").text(a11+' руб.');
jQuery("#outMon").text(b11+' руб.');
jQuery("#sumMon").text(c11+' руб.');
jQuery(".invested .interBox").height(a/20000);
jQuery(".received .interBox").height(b1/20000);
});
jQuery(".calcBox input").on("change, click", function(){
var a = parseFloat($("#inCount").val());
var b = parseFloat($("#outCount").val());
var c = parseFloat($(".radioList input:checked").val());
var a1 = a*(c/100)
var b1 = a1+a-b
var c1 = b1*12
var a11 = a.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
var b11 = b1.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
var c11 = c1.toString().replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ')
jQuery("#inMon").text(a11+' руб.');
jQuery("#outMon").text(b11+' руб.');
jQuery("#sumMon").text(c11+' руб.');
jQuery(".invested .interBox").height(a/20000);
jQuery(".received .interBox").height(b1/20000);
Ниже отрывок из index.php может тоже пригодится.
<section class="howToEarn">
<div class="res">
<h1>Калькулятор <span class="din_bold">скважины</span></h1>
<div class="calculator"><form>
<div class="calcBox">
<span class="cbTitle">Введите исходные данные</span>
<div class="cbLine">
<span class="cblTitle">Глубина скважины, м.</span>
<div>
<input class="inCount" id="inCount" name="in" type="text" value="0">
<div class="sliderBox bbox sliderIn"></div>
<div class="priceList"> <span>0 м.</span> <span>50 м.</span> <span>100 м.</span> <span>150 м.</span></div>
</div>
</div>
<div class="procBox">
<span class="pbTitle">Тип трубы:</span>
<div class="radioList">
<label><input class="niceRadio" type="radio" name="proc" value="1600" id="proc_0" checked>Металл ⌀133</label>
<label><input class="niceRadio" type="radio" name="proc" value="1900" id="proc_1">Металл ⌀133 + Пластик ⌀117</label>
</div>
</div>
<br>
<br>
<div class="procBox">
<span class="pbTitle">Тип обустройства:</span>
<div class="radioList">
<label><input class="niceRadio" type="radio" name="proc" value="35500" id="proc_0" checked>Летний </label>
<label><input class="niceRadio" type="radio" name="proc" value="100000" id="proc_2">Металлический кессон </label>
</div>
</div>
</div>
<input type="hidden" name="user_data[url]" value="landing_opt_real" />
</form></div>
<div class="investedReceived">
<div class="invested">
<div class="interBox"><div class="textBox">Стоимость скважины<span id="inMon">20 000 руб.</span></div></div>
</div>
<div class="received">
<div class="interBox"><div class="textBox">Стоимость обустройства<span id="outMon">53 000 руб.</span></div></div>
</div>
<div class="clear"></div>
<p class="month12">Итого:</p>
<span class="summ" id="sumMon">636 000 руб.</span>
<a class="popup_t want but din_bold" href="javascript:void(0)">Хочу заказать</a>
|
enable209,
name и id у строк 19, 20 и 28,29 должно быть разным!!! да и сами блоки procBox должны же хоть чем-то отличатся? ваши обрывки кода плохо подходят для локализации кода, хорошо хоть задачу лаконично сформулировали. и нафига столько $(function() и jQuery(function() хватило бы одной таблетки на весь код! |
Цитата:
|
slider ui калькулятор для скважины
enable209,
смотрите внимательно весь код!!!
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
.sliderIn{
margin:20px;
width:500px;
height:5px;
}
.ui-slider-handle{
border-radius:50%;
position:relative;
font-size:14px;
display:block;
}
.ui-slider-horizontal .ui-slider-handle{
top:0.5em;
background:transparent;
border-radius:0%;
width:0;
height:0;
border-top:none;
text-decoration:none;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:14px solid red;
}
.ui-slider-horizontal .ui-slider-handle:last-of-type{
background:transparent;
border-bottom:none;
border-top:14px solid red;
top:-1.2em;
}
.ui-slider-horizontal .ui-slider-handle:last-of-type:focus {
outline: 0;
}
.active {
background-color: #0000CD;
color: #FFFFFF;
}
.priceList span {
border-radius: 8px;
padding: 2px 8px;
cursor: pointer;
border: 1px solid #0000CD
}
</style>
</head>
<body><section class="howToEarn">
<div class="res">
<h1>Калькулятор <span class="din_bold">скважины</span></h1>
<div class="calculator"><form>
<div class="calcBox">
<span class="cbTitle">Введите исходные данные</span>
<div class="cbLine">
<span class="cblTitle">Глубина скважины, м.</span>
<div>
<input class="inCount" id="inCount" name="in" type="text" value="0">
<div class="sliderBox bbox sliderIn"></div>
<div class="priceList"> <span>0 м.</span> <span>50 м.</span> <span>100 м.</span> <span>150 м.</span></div>
</div>
</div>
<div class="procBox">
<span class="pbTitle">Тип трубы:</span>
<div class="radioList">
<label><input class="niceRadio" type="radio" name="tube" value="1600" checked>Металл ⌀133</label>
<label><input class="niceRadio" type="radio" name="tube" value="1900" >Металл ⌀133 + Пластик ⌀117</label>
</div>
</div>
<br>
<br>
<div class="procBox">
<span class="pbTitle">Тип обустройства:</span>
<div class="radioList">
<label><input class="niceRadio" type="radio" name="proc" value="35500" checked>Летний </label>
<label><input class="niceRadio" type="radio" name="proc" value="100000" >Металлический кессон </label>
</div>
</div>
</div>
<input type="hidden" name="user_data[url]" value="landing_opt_real" />
</form></div>
<div class="investedReceived">
<div class="invested">
<div class="interBox"><div class="textBox">Стоимость скважины : <span id="inMon">20 000 руб.</span></div></div>
</div><br>
<div class="received">
<div class="interBox"><div class="textBox">Стоимость обустройства : <span id="outMon">53 000 руб.</span></div></div>
</div>
<div class="clear"></div>
<p class="month12">Итого:</p>
<span class="summ" id="sumMon">636 000 руб.</span>
<a class="popup_t want but din_bold" href="javascript:void(0)">Хочу заказать</a>
</div>
</div>
</section>
<script>
jQuery(function() {
var c = {
0: 0,
50: 1,
100: 2,
150: 3
},
a = $(".priceList span");
$(".sliderIn").slider({
max: 150,
min: 0,
step: 1,
value: 0,
range: "min",
slide: function(f, b) {
$(".inCount").val(b.value);
var d = b.value * $(".procBox:first input:checked").val(),
e = +$(".procBox:last input:checked").val();
$("#inMon").text(d + " руб.");
$("#outMon").text(e + " руб.");
$("#sumMon").text(d + e + " руб.");
a.removeClass("active");
void 0 !== c[b.value] && a.eq(c[b.value]).addClass("active")
},
change: function(f,
b) {
$(".inCount").val(b.value);
var d = b.value * $(".procBox:first input:checked").val(),
e = +$(".procBox:last input:checked").val();
$("#inMon").text(d + " руб.");
$("#outMon").text(e + " руб.");
$("#sumMon").text(d + e + " руб.");
a.removeClass("active");
void 0 !== c[b.value] && a.eq(c[b.value]).addClass("active")
}
});
$(".sliderIn").slider("option", "value", 0);
$(".calculator input").on({
change: function() {
var a = +$(".inCount").val() || 0;
$(".inCount").val(a);
$(".sliderIn").slider("option",
"value", a)
}
});
a.on({
click: function() {
var c = a.index(this);
$(".sliderIn").slider("option", "value", 50 * c)
}
})
});
</script>
</body>
</html>
|
Я правильно понял, что все то, что все позиции относящиеся к калькулятору, которые у меня есть, нужно заменить на те, которые вы прислали?
|
enable209,
и html и css тоже |
Вложений: 1
Перенес вроде все верно) но вот, что получилось (скрин во вложении) и еще, при переключении кнопки радио с одной позиции на другую, стоимость сразу не меняется, а начинает меняться только при передвижении ползунка(
|
enable209,
строка 154 пост 4 измените change на click у вас куча ошибок в html, лишние теги или незакрытые собственные закрывающие теги типа <p/> вместо </p> , скрипты после body ... и т.д. |
Цитата:
change на click изменил, стало все ок) Спасибо) |
enable209,
https://validator.w3.org/nu/?doc=htt...m-groups.ru%2F убрать дубликаты name Error: Duplicate attribute <input type="text" name="tel" placeholder="Телефон" class="bbox picted tel" name="phone"> Self-closing syntax исправить <p/> Stray start tag перенести скрипт - поставить перед боди а не после Unclosed element и End tag и Stray end tag -- лишние или незакрытые или неоткрытые теги -- убрать переставить или закрыть , остальное не страшно. |
| Часовой пояс GMT +3, время: 22:48. |