MortSith
@MortSith

Как переключать класс в зависимости от чётности элемента?

Нужно, чтобы при первом нажатии кнопки нечетные дивы стали желтыми, а при повторном нажатии - четные желтыми, а нечетные обратно зелеными.

  • Вопрос задан
  • 95 просмотров
Решения вопроса 1
@tantumus21
Больно смотреть на ваш код :( именование функций и переменных за пределами моего восприятия

html
<section class="flex-sec">
  <button>BTN</button>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</section>


css
section {
  display: flex;
  button {
    width: 50px;
    height: 50px;
    border: solid 4px black;
    background: yellow;
  }
}
div {
  width: 200px;
  height: 200px;
  background: #00ff0b;
  margin: 10px;
}

.b1 {
  background: #fc0;
}


js
let cards = document.querySelectorAll(".flex-sec > div");
let button = document.querySelector(".flex-sec>button");
let firstClick = true;

button.addEventListener("click", switchColor);

function switchColor() {
  for (let i = 0; i < cards.length; i++) {
    if (firstClick) {
      if (i % 2 == 0) {
        cards[i].classList.add("b1");
      }
    } else {
      cards[i].classList.toggle("b1");
    }
  }
  firstClick = false;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
Не про циклы, правда.. CSS-селекторами можно выбирать чётные и нечётные элементы.
const even = [...document.querySelectorAll(".flex-sec > div:nth-child(even)")];
const odd = [...document.querySelectorAll(".flex-sec > div:nth-child(odd)")];
const className = '_tog-sw';

let counter = 0;

document.querySelector(".flex-sec > button")
  .addEventListener('click', () => {
    counter++;
    [odd, even].forEach((arr, i) => {
      arr.forEach((el) => el.classList[i === (counter & 1) ? 'add' : 'remove'](className));
    });
  });


Ответ написан
0xD34F
@0xD34F Куратор тега JavaScript
const items = document.querySelectorAll('.b1');
let toggle = false;

document.querySelector('button').addEventListener('click', () => {
  toggle = !toggle;
  items.forEach((n, i) => n.classList.toggle('_tog-sw', i & 1 ^ toggle));
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы