Как переключать цвет у элементов с одинаковым классом?

Question

[Barinn]

Как сделать так, чтобы при нажатии на дату, её цвет переключался на зелёный, а при повторном клике на белый (частично я смог это реализовать, но есть одно но):



Мне необходимо, чтобы при нажатии на несколько дат, все они становились зелёными, а при повторном клике они становились белыми:


В моём коде это работает, но с косяком. При нажатии на одну из дат, она меняет цвет на зелёный, а при клике на следующую дату она сначала белеет, при следующем клике на эту же дату она зеленеет.

Мой код: https://codepen.io/mal48813/pen/ZddXGY

Comments

[Михаил]

У тебя переменная которая следит за цветом доступна глобально, поэтому приходится 2 раза кликать чтоб сменить текст, я про colorBg

0xD34F предлагает хороший вариант и потом у кнопки проверять наличие класса через classList

Answer 1

[hzzzzl]

предлагаю ячейке давать еще один класс с выделением, например так
https://codepen.io/anon/pen/aggLLW

Comments

[Barinn]

Спасибо:))

Answer 2

[0xD34F]

Определяем класс, задающий другой цвет:

.active
  background-color: #77b97e
  color: #fff

  &:hover
    background-color: #99db8f

Переключаем этот класс:

document.addEventListener('click', ({ target: { classList: cl } }) =>
  cl.contains('calendar__mounth-day') && cl.toggle('active')
);

ИЛИ

Без js. Исправляем разметку - делаем значения атрибутов id у чекбоксов и for у label'ов такими, чтобы клик по label'у переключал состояние чекбокса. Т.е., одинаковыми для пары из чекбокса и соответствующего ему label'а, уникальными для каждой из пар.

Затем раскрашиваем label'ы, являющиеся соседями отмеченных чекбоксов:

.calendar__mounth-list input:checked + label
  background-color: #77b97e
  color: #fff

  &:hover
    background-color: #99db8f

Comments

[Barinn]

Спасибо тебе, прекрасный человек:))))

[Barinn]

Так очевидно, но начал усложнять)