Калькулятор с 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,
в чём проблема? |
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) } } }); |
рони, Спасибо за ответ. Остался 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) } } }); |
kirito0709,
сделайте обьект и ненужно больше ничего, или массив и никаких switch не потребуется, да и value в инпутах ненужно будет. |
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> |
рони, 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 + ' картинка') Я не могу понять как мне для каждого варианта выбранных радио кнопок вставить подмену картинок. |
Цитата:
var arr = ['1.jpg','2.jpg'...,'60.jpg'] $("#result").html('<img src="'+arr[a]+'">') |
рони, Благодарю. :thanks: :thanks: :thanks: Получилось сделать то что я хотел, создав 3 массива с путями для картинок. Сейчас наткнулся на сайте на многомерные массивы и попробую c многомерным массивом сделать тоже самое.
|
Все круто. Все работает. Благодарю еще раз сенсея Рони Однако я так и не смог до конца понять логику скрипта. :cray: :help:
$(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, вылавливая моменты указанные в данном скрипте. Попытался выстроить логику скрипта, чтобы потом смочь повторить его самостоятельно, но у меня не получилось. Если кому-то будет не лень, прошу объяснить мне непонятные мне моменты в данном скрипте. |
Часовой пояс GMT +3, время: 01:43. |