2

Я хочу по нажатию на кнопку переключить class у скрытых блоков, проще говоря сделать их видимыми, использовал такой код:

window.onload = function() {
  var btn = document.querySelector(".btn");
  btn.onclick = function() {
    var items = document.querySelectorAll('.flex .item');

    items.classList.toggle('active');

  }
};
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.item {
  width: 200px;
  height: 200px;
  background: #ccc;
  margin: 10px;
  visibility: hidden;
  opacity: 0;
  transition: 0.35s;
}

.active {
  visibility: visible;
  opacity: 1;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  width: 660px;
  margin: auto;
}
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
<button class="btn">Показать</button>

Скажите где я ошибся ?

1 ответ 1

3

Помоту что вы пытаетесь получить доступ ко всем элементам массива сразу, так нельзя.

window.onload = function() {
  var btn = document.querySelector(".btn");
  btn.onclick = function() {
    var items = document.querySelectorAll('.flex .item');
    for (var i = 0; i < items.length; i++)
    {
      items[i].classList.toggle('active');
    }
    
  }
};
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.item {
  width: 200px;
  height: 200px;
  background: #ccc;
  margin: 10px;
  visibility: hidden;
  opacity: 0;
  transition: 0.35s;
}

.active {
  visibility: visible;
  opacity: 1;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  width: 660px;
  margin: auto;
}
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
<button class="btn">Показать</button>

3
  • к сожалению плюс не могу сделать , спасибо
    – Nikita
    17 ноя 2018 в 10:51
  • т.е получается надо обязательно проходить по в цикле по элементам ?
    – Nikita
    17 ноя 2018 в 10:53
  • Да, во всех яп.
    – user245150
    17 ноя 2018 в 10:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.