БЛОГ НА HUSL


Не могу настроить скрывание/отображению блоков по выбору radio

Автор вопроса: KaZooM

Нужен скрипт, что бы при radio checked отображались определенные div

.work-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}
.work-menu-item {
    margin: 5px;
}
.radio-button {
    display: flex;
    margin: 15px;
}
.radio-button input[type=radio] {
    display: none;
}
.radio-button label{
cursor: pointer;
color: #555555;
}
.radio-button input[type=radio]:checked + label {
    color: #f00;
}
.radio-button label:hover {
    color: #777;
}
.work-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.work-item1 {
    height: 320px;
    width: 360px;
    background-image: url(/image/works1.png);
    margin: 7px;
}
.work-item2 {
    height: 320px;
    width: 360px;
    background-image: url(/image/work2.png);
    margin: 7px;
}
.work-item3 {
    height: 320px;
    width: 360px;
    background-image: url(/image/work3.png);
    margin: 7px;
}
.work-item4 {
    height: 320px;
    width: 360px;
    background-image: url(/image/work4.png);
    margin: 7px;
}
.work-item5 {
    height: 320px;
    width: 360px;
    background-image: url(/image/work5.png);
    margin: 7px;
}
.work-item6 {
    height: 320px;
    width: 360px;
    background-image: url(/image/work6.png);
    margin: 7px;
}
.work-item7 {
    height: 320px;
    width: 360px;
    background-image: url(/image/work7.png);
    margin: 7px;
}
.work-item8 {
    height: 320px;
    width: 360px;
    background-image: url(/image/work8.png);
    margin: 7px;
}
.work-item9 {
    height: 320px;
    width: 360px;
    background-image: url(/image/work9.png);
    margin: 7px;
}
.work-item-info {
    visibility: hidden;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 360px;
    height: 320px;
}
.work-item-name {
    color: #fff;
    font-size: 14px;
}
.work-item-category {
    margin-top: 18px;
    color: #fff;
    font-size: 10px;
}
.work-item-link {
    display: flex;
    width: 100px;
    height: 38px;
    background-color: #fff;
    color: #f00;
    font-size: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}
.work-item1:hover .work-item-info{
    visibility: visible;
    background-color: rgba(255, 99, 71, 0.8);;
}
.work-item2:hover .work-item-info{
    visibility: visible;
    background-color: rgba(255, 99, 71, 0.8);;
}
.work-item3:hover .work-item-info{
    visibility: visible;
    background-color: rgba(255, 99, 71, 0.8);;
}
.work-item4:hover .work-item-info{
    visibility: visible;
    background-color: rgba(255, 99, 71, 0.8);;
}
.work-item5:hover .work-item-info{
    visibility: visible;
    background-color: rgba(255, 99, 71, 0.8);;
}
.work-item6:hover .work-item-info{
    visibility: visible;
    background-color: rgba(255, 99, 71, 0.8);;
}
.work-item7:hover .work-item-info{
    visibility: visible;
    background-color: rgba(255, 99, 71, 0.8);;
}
.work-item8:hover .work-item-info{
    visibility: visible;
    background-color: rgba(255, 99, 71, 0.8);;
}
.work-item9:hover .work-item-info{
    visibility: visible;
    background-color: rgba(255, 99, 71, 0.8);;
}
.work-item-link:hover {
    background-color: #f00;
    color: #fff;
}

<div class="tabs">
            <div class="work-menu">
                <div class="radio-button">
                    <input name="work-menu-item-sellect" class="work-menu-item" type="radio" id="all" value="All"  checked>
                    <label for="all">All</label>
                </div>
                <div class="radio-button">
                    <input name="work-menu-item-sellect" class="work-menu-item" type="radio" id="branding" value="Branding">
                    <label for="branding">Branding</label>
                </div>
                <div class="radio-button">
                    <input name="work-menu-item-sellect" class="work-menu-item" type="radio" id="design" value="Design">
                    <label for="design">Design</label>
                </div>
                <div class="radio-button">
                    <input name="work-menu-item-sellect" class="work-menu-item" type="radio" id="development" value="Development" >
                    <label for="development">Development</label>
                </div>
                <div class="radio-button">
                    <input name="work-menu-item-sellect" class="work-menu-item" type="radio" id="strategy" value="Strategy">
                    <label for="strategy">Strategy</label>
                </div>
                </div>
            <div class="work-items">
            <div id="work-item1" class="Branding work-item1">
                <div class="work-item-info">
                    <h3 class="work-item-name"> Hair Dress</h3>
                    <p class="work-item-category">Branding</p>
                    <a href="#" class="work-item-link"><p class="work-item-link-p">VIEV  ></p></a>
                </div>
            </div>
            <div class="work-item2">
                <div class="work-item-info">
                    <h3 class="work-item-name"> Hair Dress</h3>
                    <p class="work-item-category">Branding</p>
                    <a href="#" class="work-item-link"><p class="work-item-link-p">VIEV  ></p></a>
                </div>
            </div>
            <div class="work-item3">
                <div class="work-item-info">
                    <h3 class="work-item-name"> Hair Dress</h3>
                    <p class="work-item-category">Branding</p>
                    <a href="#" class="work-item-link"><p class="work-item-link-p">VIEV  ></p></a>
                </div>
            </div>
            <div class="work-item4">
                <div class="work-item-info">
                    <h3 class="work-item-name"> Hair Dress</h3>
                    <p class="work-item-category">Branding</p>
                    <a href="#" class="work-item-link"><p class="work-item-link-p">VIEV  ></p></a>
                </div>
            </div>
            <div class="work-item5">
                <div class="work-item-info">
                    <h3 class="work-item-name"> Hair Dress</h3>
                    <p class="work-item-category">Branding</p>
                    <a href="#" class="work-item-link"><p class="work-item-link-p">VIEV  ></p></a>
                </div>
            </div>
            <div class="work-item6">
                <div class="work-item-info">
                    <h3 class="work-item-name"> Hair Dress</h3>
                    <p class="work-item-category">Branding</p>
                    <a href="#" class="work-item-link"><p class="work-item-link-p">VIEV  ></p></a>
                </div>
            </div>
            <div class="work-item7">
                <div class="work-item-info">
                    <h3 class="work-item-name"> Hair Dress</h3>
                    <p class="work-item-category">Branding</p>
                    <a href="#" class="work-item-link"><p class="work-item-link-p">VIEV  ></p></a>
                </div>
            </div>
            <div class="work-item8">
                <div class="work-item-info">
                    <h3 class="work-item-name"> Hair Dress</h3>
                    <p class="work-item-category">Branding</p>
                    <a href="#" class="work-item-link"><p class="work-item-link-p">VIEV  ></p></a>
                </div>
            </div>
            <div class="work-item9">
                <div class="work-item-info">
                    <h3 class="work-item-name"> Hair Dress</h3>
                    <p class="work-item-category">Branding</p>
                    <a href="#" class="work-item-link"><p class="work-item-link-p">VIEV  ></p></a>
                </div>
            </div>
        </div>    
    </div>

Источник

Ответы (1 шт):

Автор решения: Евгений Колмак

В HTML

<span><input name="radio-button" type="radio">Первый </span>
  <span><input name="radio-button" type="radio">Второй</span>
  <span><input name="radio-button" type="radio">Третий</span>
  <div class="first-block">11111111111111111</div>
  <div class="second-block">2222222222222222</div>
  <div class="third-block">3333333333333333</div>

в JavaScript

const radioButton = document.querySelectorAll('input');
// Получаем коллекцию инпутов
const block = document.querySelectorAll('div');
// Получаем коллекцию блоков (которые будем скрывать)

for (item of radioButton) {
  //Проходимся циклом по коллекции и навешиваем обработчик событий
  // Что бы при клике, проверять какой инпут выбран
  item.addEventListener('click', function () {
    // При клике запускается цикл
    for (let i = 0; i < radioButton.length; i++) {
      // Если инпут выбран - скрывается элемент под индексом [i]
      // В коллекции с блоками (block);
      if (radioButton[i].checked) {
        block[i].style.display = 'none';
        // Неактивные элементы становятся видимыми
      } else if (!radioButton[i].cheked) {
        block[i].style.display = 'block';
      }
    }
  });
}
→ Ссылка

licensed under cc by-sa 3.0 with attribution.