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

Question

[MortSith]

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

Answer 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;
}

Comments

[MortSith]

да, с именами проблема у меня, только учусь писать код

Answer 2

[Сергей Соколов]

Не про циклы, правда.. 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));
    });
  });

Answer 3

[0xD34F]

const items = document.querySelectorAll('.b1');
let toggle = 0;

document.querySelector('button').addEventListener('click', () => {
  toggle ^= 1;
  items.forEach((n, i) => n.classList.toggle('_tog-sw', i & 1 ^ toggle));
});