Сергей Ракипов,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <input type="radio" value="1" class="radio" name="test"> <input type="radio" value="2" class="radio" name="test"> <input type="radio" value="3" class="radio" name="test"> <input type="radio" value="4" class="radio" name="test"> <input type="radio" value="5" class="radio" name="test"> <div class="out_console"></div> <script> let radioCheck = document.querySelectorAll(".radio"); let outConsol = document.querySelector(".out_console"); radioCheck.forEach(input => input.addEventListener("change", () => outConsol.innerHTML = `Ваша консоль - ${input.value}`)); </script> </body> </html> |
Я вот как написал
let radioCheck = document.querySelectorAll(".radio"); let outConsol = document.querySelector(".out_console"); function checkedShow() { outConsol.innerHTML = "Ваша консоль: " + this.value; } function consl(){ for(let i=0; i<radioCheck.length; i++){ radioCheck[i].addEventListener("change", checkedShow); } } consl(); И мне понятно, что есть функция которая выводит актуальное значение валье, и есть функция которая перебирает значение и слушает любое событие, и если произошло изменение то запускает функцию radioCheck.forEach(input => input.addEventListener("change", () => outConsol.innerHTML = `Ваша консоль - ${input.value}`)); а вот это мне не очень понятно, но напоминает стрелочные функции, я один урок видел но пока не вникал |
Сергей Ракипов,
Перебор: forEach |
<main> <div class="game_console"> Выберите консоль: <br><br> <div class="align_game"> <input type="radio" name="console" class="radio" id="ps4" value="PS4"><div class="stlradio"></div><div class="name"> <label for="ps4">PS4</label></div> </div> <div class="align_game"> <input type="radio" name="console" class="radio" id="xbox" value="X-box"> <div class="stlradio"></div><div class="name"> <label for="xbox">X-box</label></div> </div> <div class="align_game"> <input type="radio" name="console" class="radio" id="nindendo" value="Nindendo"><div class="stlradio"></div><div class="name"> <label for="nindendo">Nindendo</label></div> </div> </div> <br> <div class="out_console"></div><br> <div class="out_select_game"></div> <br><br> <div class="out_game"></div> <br> <div class="all_game"> <div class="game_ps"> <label for="game_1"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_1" value="God of War"><div class="stlchek"></div><div class="name"> God of War</div> </div> </label> <label for="game_2"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_2" value="Uncharted 4"> <div class="stlchek"></div><div class="name"> Uncharted 4</div> </div> </label> <label for="game_3"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_3" value="BloodBorne"><div class="stlchek"></div><div class="name"> BloodBorne</div> </div> </label> </div> <div class="game_xb"> <label for="game_4"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_4" value="Gears 5"><div class="stlchek"></div> <div class="name">Gears 5</div> </div> </label> <label for="game_5"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_5" value="Halo Infinite"><div class="stlchek"></div> <div class="name">Halo Infinite</div> </div> </label> <label for="game_6"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_6" value="Cuphead"><div class="stlchek"></div><div class="name"> Cuphead</div> </div> </label> </div> <div class="game_nin"> <label for="game_7"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_7" value="Zelda"><div class="stlchek"></div><div class="name"> Zelda</div> </div> </label> <label for="game_8"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_8" value="Yoshi's"><div class="stlchek"></div><div class="name"> Yoshi's</div> </div> </label> <label for="game_9"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_9" value="Mario Odyssey"><div class="stlchek"></div> <div class="name">Mario Odyssey</div> </div> </label> </div> </div> </main> main{ max-width: 720px; margin: 0 auto; } label{ cursor: pointer; } label:hover{ color: #03A5D; } input[type=radio] { display: none; } input[type=checkbox] { display: none; } .stlradio { display: inline-block; border: 1px solid #b2b1b1; width: 16px; height: 16px; position: relative; vertical-align: middle; box-sizing: border-box; margin-right: 4px; border-radius: 300px; background-color:#ffffff; } .stlradio:before { content: ""; background: #03A5D7; width: 8px; height: 8px; opacity: 0; transition: 0.3s; position: absolute; top: 3px; left: 3px; border-radius: 300px; } input:checked + .stlradio:before { opacity: 1; } .stlchek { display: inline-block; border: 1px solid #b2b1b1; width: 16px; height: 16px; position: relative; vertical-align: middle; box-sizing: border-box; margin-right: 4px; } .stlchek:before { content: ""; background: #03A5D7; width: 8px; height: 8px; opacity: 0; transition: 0.3s; position: absolute; top: 3px; left: 3px; } input:checked + .stlchek:before { opacity: 1; } .name{ display: inline-block; } .name:hover{ color: #03A5D7; } .align_game{ display:flex; align-items: center; } .align{ display: inline-flex; align-items: center; margin: 0px 5px 0px 5px; } .all_game{ position: relative; } .game_ps { position:absolute; display: none; } .game_xb { position:absolute; display: none; } .game_nin { position:absolute; display: none; } let radioCheck = document.querySelectorAll(".radio"); let box = document.querySelectorAll(".box"); let outConsol = document.querySelector(".out_console"); let outGame = document.querySelector(".out_game"); let outSelectGame = document.querySelector(".out_select_game"); let gamePs = document.querySelector(".game_ps"); let gameXb = document.querySelector(".game_xb"); let gameNin = document.querySelector(".game_nin"); function checkedShow() { outConsol.innerHTML = "Ваша консоль: " + this.value; } function consl(){ for(let i=0; i<radioCheck.length; i++){ radioCheck[i].addEventListener("change", checkedShow); } } consl(); function selectedRadioButton(){ for(let i=0; i<radioCheck.length; i++){ if(radioCheck[0].checked){ gamePs.style.display = "block"; gameXb.style.display = "none"; gameNin.style.display = "none"; outGame.innerHTML = "Эксклюзивы для PS4" } else if(radioCheck[1].checked){ gamePs.style.display = "none"; gameXb.style.display = "block"; gameNin.style.display = "none"; outGame.innerHTML = "Эксклюзивы для X-box" } else if(radioCheck[2].checked){ gamePs.style.display = "none"; gameXb.style.display = "none"; gameNin.style.display = "block"; outGame.innerHTML = "Эксклюзивы для Nindendo" } } } function gameAll(){ for(let i=0; i<radioCheck.length; i++){ radioCheck[i].addEventListener("change", selectedRadioButton); } } gameAll(); Все что мог попробовать не получается реализовать следующее. Нужно что бы при выборе игры, она выводилась <div class="out_select_game"></div> если их выбрано не одна то они должны идти в строку. И если чек бокс снят то и игра должна исчезнуть из строки. |
Сергей Ракипов,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> main{ max-width: 720px; margin: 0 auto; } label{ cursor: pointer; } label:hover{ color: #03A5D; } input[type=radio] { display: none; } input[type=checkbox] { display: none; } .stlradio { display: inline-block; border: 1px solid #b2b1b1; width: 16px; height: 16px; position: relative; vertical-align: middle; box-sizing: border-box; margin-right: 4px; border-radius: 300px; background-color:#ffffff; } .stlradio:before { content: ""; background: #03A5D7; width: 8px; height: 8px; opacity: 0; transition: 0.3s; position: absolute; top: 3px; left: 3px; border-radius: 300px; } input:checked + .stlradio:before { opacity: 1; } .stlchek { display: inline-block; border: 1px solid #b2b1b1; width: 16px; height: 16px; position: relative; vertical-align: middle; box-sizing: border-box; margin-right: 4px; } .stlchek:before { content: ""; background: #03A5D7; width: 8px; height: 8px; opacity: 0; transition: 0.3s; position: absolute; top: 3px; left: 3px; } input:checked + .stlchek:before { opacity: 1; } .name{ display: inline-block; } .name:hover{ color: #03A5D7; } .align_game{ display:flex; align-items: center; } .align{ display: inline-flex; align-items: center; margin: 0px 5px 0px 5px; } .all_game{ position: relative; } .game_ps { position:absolute; display: none; } .game_xb { position:absolute; display: none; } .game_nin { position:absolute; display: none; } .all_game > div.open{ display: block; } </style> </head> <body> <main> <div class="game_console"> Выберите консоль: <br><br> <div class="align_game"> <input type="radio" name="console" class="radio" id="ps4" value="PS4"><div class="stlradio"></div><div class="name"> <label for="ps4">PS4</label></div> </div> <div class="align_game"> <input type="radio" name="console" class="radio" id="xbox" value="X-box"> <div class="stlradio"></div><div class="name"> <label for="xbox">X-box</label></div> </div> <div class="align_game"> <input type="radio" name="console" class="radio" id="nindendo" value="Nindendo"><div class="stlradio"></div><div class="name"> <label for="nindendo">Nindendo</label></div> </div> </div> <br> <div class="out_console"></div><br> <div class="out_select_game"></div> <br><br> <div class="out_game"></div> <br> <div class="all_game"> <div class="game_ps"> <label for="game_1"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_1" value="God of War"><div class="stlchek"></div><div class="name"> God of War</div> </div> </label> <label for="game_2"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_2" value="Uncharted 4"> <div class="stlchek"></div><div class="name"> Uncharted 4</div> </div> </label> <label for="game_3"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_3" value="BloodBorne"><div class="stlchek"></div><div class="name"> BloodBorne</div> </div> </label> </div> <div class="game_xb"> <label for="game_4"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_4" value="Gears 5"><div class="stlchek"></div> <div class="name">Gears 5</div> </div> </label> <label for="game_5"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_5" value="Halo Infinite"><div class="stlchek"></div> <div class="name">Halo Infinite</div> </div> </label> <label for="game_6"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_6" value="Cuphead"><div class="stlchek"></div><div class="name"> Cuphead</div> </div> </label> </div> <div class="game_nin"> <label for="game_7"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_7" value="Zelda"><div class="stlchek"></div><div class="name"> Zelda</div> </div> </label> <label for="game_8"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_8" value="Yoshi's"><div class="stlchek"></div><div class="name"> Yoshi's</div> </div> </label> <label for="game_9"> <div class="align"> <input type="checkbox" class="stlchek box" id="game_9" value="Mario Odyssey"><div class="stlchek"></div> <div class="name">Mario Odyssey</div> </div> </label> </div> </div> </main> <script> var index = 0; var game = document.querySelectorAll('.all_game > div'); function gamesSelectedShow() { var nameGames = []; game[index].querySelectorAll('input').forEach(function(input) { if (input.checked) nameGames.push(input.value) }) document.querySelector('.out_select_game').innerHTML = nameGames.length ? nameGames : 'Сделайте выбор!'; } function consoleSelectedShow() { game.forEach(function(div, i) { div.classList.toggle('open', i === index) }) } document.querySelectorAll('[name="console"]').forEach(function(console, i) { console.addEventListener('change', function() { document.querySelector('.out_console').innerHTML = 'Ваша консоль: ' + console.value; index = i; consoleSelectedShow(); gamesSelectedShow(); }) }) game.forEach(function(div) { div.addEventListener('change', gamesSelectedShow) }) </script> </body> </html> |
Я кончено благодарю, но это же не коммерческий проект, это я сам себе задачу ставлю и пытаюсь ее решить тем самым учусь, вот вы написали а я не чего не понял
var index = 0; var game = document.querySelectorAll('.all_game > div'); function gamesSelectedShow() { var nameGames = []; game[index].querySelectorAll('input').forEach(function(input) { if (input.checked) nameGames.push(input.value) }) document.querySelector('.out_select_game').innerHTML = nameGames.length ? nameGames : 'Сделайте выбор!'; } function consoleSelectedShow() { game.forEach(function(div, i) { div.classList.toggle('open', i === index) }) } document.querySelectorAll('[name="console"]').forEach(function(console, i) { console.addEventListener('change', function() { document.querySelector('.out_console').innerHTML = 'Ваша консоль: ' + console.value; index = i; consoleSelectedShow(); gamesSelectedShow(); }) }) game.forEach(function(div) { div.addEventListener('change', gamesSelectedShow) }) Хотя бы в двух словах как это работает |
Сергей Ракипов,
forEach тоже for, но гораздо удобнее. var index = 0;// номер открытой вкладки с названиями игр var game = document.querySelectorAll('.all_game > div'); // массив вкладок function gamesSelectedShow() { //сбор названий игр в открытой вкладке var nameGames = []; //массив для названий game[index].querySelectorAll('input').forEach(function(input) { //цикл по всем инпутам в открытой вкладке if (input.checked) nameGames.push(input.value) // если стоит галочка, сохранияем имя игры в массив имён }) document.querySelector('.out_select_game').innerHTML = nameGames.length ? nameGames : 'Сделайте выбор!'; // выводим имена если они есть(длина массива не ноль) иначе надпись Сделайте выбор } function consoleSelectedShow() {// обходим все вкладки, добавляем, если номер вкладки совпадаем с индексом консоли, или убираем класс open // этот класс открывает вкладку .all_game > div.open{ display: block;} game.forEach(function(div, i) { div.classList.toggle('open', i === index) }) } document.querySelectorAll('[name="console"]').forEach(function(console, i) { //обходим все кнопки для выбора консоли // на кнопку ставим обработчик console.addEventListener('change', function() { //если нажали на кнопку, выводим значение этой кнопки document.querySelector('.out_console').innerHTML = 'Ваша консоль: ' + console.value; index = i;// меняем индекс для открывания вкладки consoleSelectedShow(); // открываем вкладку с нужным индексом gamesSelectedShow(); // смотрим есть ли выбранные названия в открытой вкладке }) }) game.forEach(function(div) { // ставим обработку на каждую вкладку div.addEventListener('change', gamesSelectedShow) // если в вкладке был выбор, выводим актуальный список игр }) |
Цитата:
|
Сергей Ракипов,
если нет особой необходимости, не копируйте ответ целиком, есть цитирование Цитата выделенного. |
Цитата:
|
Часовой пояс GMT +3, время: 18:51. |