10.02.2017, 16:41
|
|
Новичок на форуме
|
|
Регистрация: 10.02.2017
Сообщений: 6
|
|
|
Калькулятор с 3 группами радио кнопок
Суть вопроса такая: есть 3 группы радиокнопок.
1. При выборе радиокнопки из первой группы в переменную floor должно передаваться значение выбранной радио кнопки.
2. При выборе радиокнопки из первой группы в переменную roof должно передаваться значение выбранной радио кнопки.
3. При выборе радиокнопки из первой группы в переменную constract должно передаваться значение выбранной радио кнопки.
Далее в зависимости от комбинации выбранных радио кнопок в каждой группе
(пример 1: для floor выбрана 2 кнопка, для roof выбрана 4 кнопка, для constract выбрана 3 кнопка
пример 2: для floor выбрана 3 кнопка, для roof выбрана 2 кнопка, для constract выбрана 1 кнопка)
в div#result должна вставляться соотвествующая картинка.
Подскажите как можно сделать данный калькулятор (желательно с комментариями к каждой строке javascript) или в каком направлении копать.
Ссылка на мои попытки https://jsfiddle.net/kirito0709/es648fys/
P.S. с javascript знаком на уровне менять параметры слайдеров по документации.
Последний раз редактировалось kirito0709, 10.02.2017 в 16:59.
|
|
10.02.2017, 17:13
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
|
kirito0709,
в чём проблема?
|
|
10.02.2017, 18:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
kirito0709,
$(function() {
var floor="without_floor",roof="roof_white",constract="constract_silver";
$('#form1').on('click', 'input', function (event) {
floor = $(this).attr('value');
console.log(floor); createImg();
document.getElementById('result1').innerHTML = '(|||| ' + floor + ' ||||) ';
})
$('#form2').on('click', 'input', function (event) {
roof = $(this).attr('value');
console.log(roof); createImg();
document.getElementById('result2').innerHTML = '(|||| ' + roof + ' ||||) ';
})
$('#form3').on('click', 'input', function (event) {
constract = $(this).attr('value');
console.log(constract); createImg();
document.getElementById('result3').innerHTML = '(|||| ' + constract + ' ||||) ';
})
function createImg()
{
if(floor && roof && constract) {
var src = '/'+floor+'/'+roof+'/'+constract +".jpg" ; //уточните путь к картиинке
var img = $('<img>', {src : src})
$('#result').html(img)
}
}
});
|
|
10.02.2017, 23:57
|
|
Новичок на форуме
|
|
Регистрация: 10.02.2017
Сообщений: 6
|
|
рони, Спасибо за ответ. Остался 1 вопрос. В зависимости от выбранных чекбоксов меняются картинки. Всего картинок 60 штук. Пути к картинкам заранее известны. Правильно ли делать через switch ? Я взял Ваш код и попытался добавить свои наметки. Вроде работает, но не уверен что то, что я придумал это - лучший вариант.
$(function() {
var floor="without_floor",roof="roof_white",constract="constract_silver";
$('#form1').on('click', 'input', function (event) {
floor = $(this).attr('value');
console.log(floor); createImg();
document.getElementById('result1').innerHTML = '(|||| ' + floor + ' ||||) ';
})
$('#form2').on('click', 'input', function (event) {
roof = $(this).attr('value');
console.log(roof); createImg();
document.getElementById('result2').innerHTML = '(|||| ' + roof + ' ||||) ';
})
$('#form3').on('click', 'input', function (event) {
constract = $(this).attr('value');
console.log(constract); createImg();
document.getElementById('result3').innerHTML = '(|||| ' + constract + ' ||||) ';
})
function createImg()
{
if(floor && roof && constract) {
var testresult = (floor + roof + constract);
console.log(testresult);
switch(testresult) {
case 'without_floorroof_whiteconstract_silver':
document.getElementById('result').innerHTML = 'Выбраны все первые пункты, вставляем картинку XXX';
break
case 'floor_battenroof_greyconstract_silver':
document.getElementById('result').innerHTML = 'выбраны все вторые пункты кроме последнего, вставляем картинку YYY';
break
// ... тут еще около 58 case для разных вариаций выбранных радиокнопок
default:
document.getElementById('result').innerHTML = 'Я таких значений не знаю'; // если я правильно понял то default для switch можно не указывать (или указать картинку по умолчанию.
}
// var src = '/'+floor+'/'+roof+'/'+constract +".jpg" ; //уточните путь к картинке
// var img = $('<img>', {src : src})
// $('#result').html(img)
}
}
});
|
|
11.02.2017, 00:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
|
kirito0709,
сделайте обьект и ненужно больше ничего, или массив и никаких switch не потребуется, да и value в инпутах ненужно будет.
|
|
11.02.2017, 01:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
kirito0709,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
.floor-chechbox{margin-bottom: 15px;}
label.floor-radio{margin-bottom: 0px;}
label.floor-radio input{display:inline-block;}
label.floor-radio input+div.floor-checkbox{
height: 20px;
text-align:left;
display:inline-block;
vertical-align: text-bottom;
padding-left:5px;
}
label.floor-radio input~div.checked-item-text > img{height: 20px;}
label.floor-radio input:checked~div.checked-item-text{color: #cbb892; font-weight:bold;}
label.floor-radio input:checked~div.checked-item-text:before{
content: '✔ ';
color:#b1945b;
}
label.floor-radio input:checked~div.floor-checkbox{background:#c4af84;}
label.floor-radio input+div.floor-checkbox {
width: 15px;
height: 15px;
border: 1px solid #b1945b;
box-sizing: border-box;
border-radius:50%;
}
label.floor-radio input {display: none;}
.floor-checkbox, .checked-item-text, .checked-item-text span, .checked-item-text img {
vertical-align: middle;
display:inline-block;
}
/* цвет тента */
label.roof-color {
display: inline-block;
vertical-align: top;
}
label.roof-color input {
display: none;
}
label.tent-color input#t-color-1+div {
background: #82a5bb;
}
label.roof-color input+div {
width: 24px;
height: 24px;
text-align: center;
opacity: 0.8;
border: 1px solid #000;
box-sizing: border-box;
}
label.roof-color input:checked+div {
opacity: 1;
}
label.roof-color input+div i {
display: none;
line-height: 24px;
font-size:18px;
}
label.roof-color input:checked+div i {
display: block;
top: -2px;
position: relative;
}
label.roof-color input+div:hover::before {
content: attr(data-title);
position: relative;
top: -40px;
left: -100%;
padding: 5px 10px;
border: 1px solid #333;
background: rgba(255,255,230,1);
}
label.roof-color input+div:hover::after {
content: '';
display: block;
position: relative;
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(0,0,0,.7);
opacity: 1;
top: -33px;
z-index:1;
}
label.roof-color input:checked+div:hover::before {
top: -40px;
}
label.roof-color input:checked+div:hover::after {
top: -57px;
}
label.roof-color input:checked+div:hover i {
top: -18px;
position: relative;
}
label.constract-color input+div:hover::before {
content: attr(data-title);
position: relative;
top: -40px;
left: -100%;
padding: 5px 10px;
border: 1px solid #333;
background: rgba(255,255,230,1);
}
label.constract-color input+div:hover::after {
content: '';
display: block;
position: relative;
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(0,0,0,.7);
opacity: 1;
top: -33px;
z-index:1;
}
label.constract-color input:checked+div:hover::before {
top: -40px;
}
label.constract-color input:checked+div:hover::after {
top: -57px;
}
label.constract-color input:checked+div:hover i {
top: -18px;
position: relative;
}
label.roof-color input#t-color-1+div {
background: #82a5bb;
}
label.roof-color input#t-color-2+div {
background: #14af39;
}
label.roof-color input#t-color-3+div {
background: #0138af;
}
label.roof-color input#t-color-4+div {
background: #babfa8;
}
label.roof-color input#t-color-5+div {
background: #ffffff;
}
label.constract-color {
display: inline-block;
vertical-align: top;
}
label.constract-color input {
display: none;
}
label.constract-color input#c-color-1+div {
background: #c0c0c0;
}
label.constract-color input#c-color-2+div {
background: #ffffff;
}
label.constract-color input#c-color-3+div {
background: #000000;
}
label.constract-color input+div {
width: 24px;
height: 24px;
text-align: center;
opacity: 0.9;
border: 1px solid #000;
box-sizing: border-box;
}
label.constract-color input:checked+div {
opacity: 1;
}
label.constract-color input+div i {
display: none;
line-height: 24px;
font-size:18px;
}
label.constract-color input:checked+div i {
display: block;
top: -2px;
position: relative;
}
label.constract-color input#c-color-3:checked+div i, label.tent-color input#t-color-3:checked+div i {
color: #fff;
}
.text-color-for-roof,
.text-color-for-constract {
padding-bottom:5px;
}
.block-roof-color {
border-right:1px solid #000;
}
/* //строки текста и цвета */
</style>
<title> by kirito0709</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var b = [0, 0, 0],
d = [15, 3, 1];
$("#form1, #form2, #form3").each(function(e, c) {
var f = $("input", c);
$(c).on("click", "input", function(a) {
a = f.index(this);
b[e] = a;
a = b.reduce(function(a, b, c) {
return a + b * d[c]
}, 0);
$("#result").html(++a + ' картинка')
})
})
});
</script>
</head>
<body>
<div id="form1" class="floor-chechbox row">
<div class="col-md-12">
<label class="floor-radio">
<input id="fr" name="floorprice" value="without_floor" type="radio" checked />
<div class="floor-checkbox"></div>
<div class="checked-item-text">коробка без пола</div>
</label>
</div>
<div class="col-md-12">
<label class="floor-radio">
<input id="zr" name="floorprice" value="floor_batten" type="radio"/>
<div class="floor-checkbox"></div>
<div class="checked-item-text">коробка с полом из половой доски</div>
</label>
</div>
<div class="col-md-12">
<label class="floor-radio">
<input id="sr" name="floorprice" value="floor_dsp" type="radio"/>
<div class="floor-checkbox"></div>
<div class="checked-item-text">коробка с полом из фанеры </div>
</label>
</div>
<div class="col-md-12">
<label class="floor-radio">
<input id="tr" name="floorprice" value="floor_dpk" type="radio"/>
<div class="floor-checkbox"></div>
<div class="checked-item-text">
<span>коробка с полом из ДПК</span>
</div>
</label>
</div>
</div>
<div class="check-color">
<div class="row">
<div class="col-xs-6 block-roof-color">
<div class="text-color-for-roof">
<b>Цвет крыши:</b>
</div>
<div id="form2" class="color-for-roof">
<label class="roof-color">
<input id="t-color-5" name="roofcolor" value="roof_white" type="radio" checked />
<div data-title="Белый"><i>✔</i></div>
</label>
<label class="roof-color">
<input id="t-color-1" name="roofcolor" value="roof_grey" type="radio" />
<div data-title="Серый"><i>✔</i></div>
</label>
<label class="roof-color">
<input id="t-color-2" name="roofcolor" value="roof_green" type="radio" />
<div data-title="Зеленый"><i>✔</i></div>
</label>
<label class="roof-color">
<input id="t-color-3" name="roofcolor" value="roof_blue" type="radio" />
<div data-title="Синий"><i>✔</i></div>
</label>
<label class="roof-color">
<input id="t-color-4" name="roofcolor" value="roof_beige" type="radio" />
<div data-title="Бежевый"><i>✔</i></div>
</label>
</div>
</div>
<div class="col-xs-6">
<div class="text-color-for-constract">
<b>Цвет стенок:</b>
</div>
<div id="form3" class="color-for-constract">
<label class="constract-color">
<input id="c-color-1" name="constractcolor" value="constract_silver" type="radio" checked />
<div data-title="Серебрянный"><i>✔</i></div>
</label>
<label class="constract-color">
<input id="c-color-2" name="constractcolor" value="constract_white" type="radio" />
<div data-title="Белый"><i>✔</i></div>
</label>
<label class="constract-color">
<input id="c-color-3" name="constractcolor" value="constract_black" type="radio" />
<div data-title="Черный"><i>✔</i></div>
</label>
</div>
</div>
</div>
</div>
<p><span id="result1"></span> <span id="result2"></span><span id="result3"></span></p>
<div style="border:1px solid #000;height:100px; width:100px;" id="result">1 картинка</div>
</body>
</html>
|
|
11.02.2017, 02:56
|
|
Новичок на форуме
|
|
Регистрация: 10.02.2017
Сообщений: 6
|
|
рони, cпасибо за уделенное время и ваше терпение. Увидел на сколько сильно у меня было неправильное мышление. Попытался с помощью справочника и учебника на данном сайте разобраться с вашим примером, но до конца не понял. Написал комментарии, но для части кода не смог этого сделать.
$(function() { //объявляем функцию
var b = [0, 0, 0], //объявляем переменную в виде массива (не понял почему именно такие числа)
d = [15, 3, 1]; //объявляем переменную в виде массива (не понял почему именно такие числа)
$("#form1, #form2, #form3").each(function(e, c) { //здесь для каждого блока с указанными id объявляем функцмию с 2мя параметрами
var f = $("input", c); //объявляем переменную f которая высчитывается по функции с параметрами input и c (не понял что за параметры)
$(c).on("click", "input", function(a) { //
a = f.index(this); //видимо передаем в переменную "а" индекс кликнутой кнопки
b[e] = a; //это я не понял
a = b.reduce(function(a, b, c) { //передаем для каждого ранее определенного индекса массива его соотвествующее значение (более точно не могу понять это действие)
return a + b * d[c] // возвращаем что-то. Что именно я не понял, а именно d[c] не понял
}, 0); // не понял что за ноль()
$("#result").html(++a + ' картинка') //тут увеличиваем значение "а" на 1 и записываем полученное значение в переменную "а" и добавляем слово картинка
})
})
});
И еще вопрос. Я изначально выкладывал не весь код. Думал что сразу пойму что и как делать, но последний код с массивами меня, честно говоря, немного пришиб((.
И так я пытаюсь сделать такой калькурятор:
На скриншоте, код js прописан только для радио кнопок которые круглые. на объединении групп радиокнопок я застопорился. Тобишь на скрине картинки меняются только при переключении кнопок для пола.
Красным - выделены картинки которые у меня менялись. THUMB это миниатюра галлереи. На картинке не видно, но при нажатии на большую картинку PREVIEW , открывается детальная картинка DETAIL на весь экран.
Синим - выделен текст который я надеюсь потом превратить в вывод цены в зависимости от выбранных кнопок.
Картинки вставлял по клику на input
var img_nofloor_detail = "<?=$arResult['FLOOR_GALLERY']['0']['DETAIL']['SRC'];?>"
var img_floor_batten_detail = "<?=$arResult['FLOOR_GALLERY']['1']['DETAIL']['SRC'];?>"
var img_floor_dsp_detail = "<?=$arResult['FLOOR_GALLERY']['2']['DETAIL']['SRC'];?>"
var img_floor_dpk_detail = "<?=$arResult['FLOOR_GALLERY']['3']['DETAIL']['SRC'];?>"
var img_nofloor_thumb = "<?=$arResult['FLOOR_GALLERY']['0']['THUMB']['src'];?>"
var img_floor_batten_thumb = "<?=$arResult['FLOOR_GALLERY']['1']['THUMB']['src'];?>"
var img_floor_dsp_thumb = "<?=$arResult['FLOOR_GALLERY']['2']['THUMB']['src'];?>"
var img_floor_dpk_thumb = "<?=$arResult['FLOOR_GALLERY']['3']['THUMB']['src'];?>"
var img_nofloor_preview = "<?=$arResult['FLOOR_GALLERY']['0']['PREVIEW']['src'];?>"
var img_floor_batten_preview = "<?=$arResult['FLOOR_GALLERY']['1']['PREVIEW']['src'];?>"
var img_floor_dsp_preview = "<?=$arResult['FLOOR_GALLERY']['2']['PREVIEW']['src'];?>"
var img_floor_dpk_preview = "<?=$arResult['FLOOR_GALLERY']['3']['PREVIEW']['src'];?>"
//переменные могу передавать из пхп пока только так. хотя возможно смогу загрузить картинки в один массив так чтобы они стояли в нужном порядке и потом попытаться передать массив из пхп в js и создать ассоциативный массив где для каждой ++a будет свой элемент массива сожержащий пути к картинкам
window.onload = function() {
$("#fr").click(function(){
document.getElementById('text_result').innerHTML = basetext;
document.querySelector('#slider>.flex-viewport>ul>li>a>img').src = img_nofloor_preview;
document.querySelector('#slider>.flex-viewport>ul>li>a').href = img_nofloor_detail;
document.querySelector('#carousel>.flex-viewport>ul>li>img').src = img_nofloor_thumb;
});
$("#zr").click(function(){
document.getElementById('text_result').innerHTML = batten;
document.querySelector('#slider>.flex-viewport>ul>li>a>img').src = img_floor_batten_preview;
document.querySelector('#slider>.flex-viewport>ul>li>a').href = img_floor_batten_detail;
document.querySelector('#carousel>.flex-viewport>ul>li>img').src = img_floor_batten_thumb;
});
$("#sr").click(function(){
document.getElementById('text_result').innerHTML = dsp;
document.querySelector('#slider>.flex-viewport>ul>li>a>img').src = img_floor_dsp_preview;
document.querySelector('#slider>.flex-viewport>ul>li>a').href = img_floor_dsp_detail;
document.querySelector('#carousel>.flex-viewport>ul>li>img').src = img_floor_dsp_thumb;
});
$("#tr").click(function(){
document.getElementById('text_result').innerHTML = dpk;
document.querySelector('#slider>.flex-viewport>ul>li>a>img').src = img_floor_dpk_preview;
document.querySelector('#slider>.flex-viewport>ul>li>a').href = img_floor_dpk_detail;
document.querySelector('#carousel>.flex-viewport>ul>li>img').src = img_floor_dpk_thumb;
});
}
Переменные могу передавать из пхп пока только так. хотя возможно смогу загрузить картинки в один массив так чтобы они стояли в нужном порядке и потом попытаться передать массив из пхп в js и создать ассоциативный массив где для каждой ++a будет свой элемент массива содержащий пути к картинкам.....
Глядя на ваш пример выше,
$("#result").html(++a + ' картинка')
Я не могу понять как мне для каждого варианта выбранных радио кнопок вставить подмену картинок.
Последний раз редактировалось kirito0709, 11.02.2017 в 02:59.
|
|
11.02.2017, 10:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
|
Сообщение от kirito0709
|
|
Я не могу понять как мне для каждого варианта выбранных радио кнопок вставить подмену картинок.
|
var arr = ['1.jpg','2.jpg'...,'60.jpg']
$("#result").html('<img src="'+arr[a]+'">')
|
|
11.02.2017, 12:56
|
|
Новичок на форуме
|
|
Регистрация: 10.02.2017
Сообщений: 6
|
|
рони, Благодарю.  Получилось сделать то что я хотел, создав 3 массива с путями для картинок. Сейчас наткнулся на сайте на многомерные массивы и попробую c многомерным массивом сделать тоже самое.
|
|
13.02.2017, 15:13
|
|
Новичок на форуме
|
|
Регистрация: 10.02.2017
Сообщений: 6
|
|
Все круто. Все работает. Благодарю еще раз сенсея Рони Однако я так и не смог до конца понять логику скрипта.  
$(function() { //объявляем функцию
var b = [0, 0, 0], //объявляем переменную в виде массива (не понял почему именно такие числа) (вроде как нулевые элементы массива каждой из трех групп радиокнопок)
d = [15, 3, 1]; //объявляем переменную в виде массива (не понял почему именно такие числа)
$("#form1, #form2, #form3").each(function(e, c) { //здесь для каждого блока с указанными id объявляем функцмию с 2мя параметрами (переменная "е" это видимо индекс элемента массива в котором хранятся id div-ов с радиокнопками )
var f = $("input", c); //объявляем переменную f которая высчитывается по функции с параметрами input и c (видимо с это родительский блок в котором лежит кликнутый input)
$(c).on("click", "input", function(a) { //
a = f.index(this); //видимо передаем в переменную "а" индекс кликнутой кнопки
b[e] = a; //это я не понял(вроде берем из массива b элемент с индексом e)
a = b.reduce(function(a, b, c) { //передаем для каждого ранее определенного индекса массива его соотвествующее значение (более точно не могу понять это действие)
return a + b * d[c] // возвращаем что-то. Что именно я не понял, а именно d[c] не понял
}, 0);
$("#result").html(++a + ' картинка') //тут увеличиваем значение "а" на 1 и записываем полученное значение в переменную "а" и добавляем слово картинка
})
})
});
В общем я почитал за эти 3 дня учебник js, вылавливая моменты указанные в данном скрипте. Попытался выстроить логику скрипта, чтобы потом смочь повторить его самостоятельно, но у меня не получилось. Если кому-то будет не лень, прошу объяснить мне непонятные мне моменты в данном скрипте.
|
|
|
|
