Как добавить разные классы разным элементам массива?

Question

В массиве три div:

<div class="option">
    <div data-id="0" class="picture picture1"></div>
    <div data-id="1" class="picture picture2"></div>
    <div data-id="2" class="picture picture3"></div>
</div>

и js код:

const disabledPicture = el => {
    el.target.classList.remove('correct')
}

const CheckAnswer = el => {
        if(el.target.classList.contains('correct')) {
            disabledPicture(el);
        }else {
            el.target.classList.add('correct')
        }
};

for(picture of pictureElements) {
    picture.addEventListener('click', e => CheckAnswer(e));
}

При нажатие на любой элемент, присваивается статус correct. Мне нужно чтобы при нажатие на дугой элемент с предыдущего удалялся класс correct.

Answer 1

При клике на элемент мы удаляем класс correct у всех элементов, а после добавляем его к тому, на который нажали

const pictures = document.querySelectorAll(".picture");
const removeActiveClass = () => pictures.forEach(picture => picture.classList.remove("correct"));
const addActiveClass = num => pictures[num].classList.add("correct");

pictures.forEach((picture, index) => {
  picture.addEventListener("click", () => {
    removeActiveClass();
    addActiveClass(index);
  });
});

Answer 2

Подробнее в комментариях к коду.

let option = document.querySelector('.option'); // элемент в котором будут элементы с меняющимися классами
option.addEventListener('click', function(e) { // Вешаем на него обработчик и будем использовать делегирование событий
  let target = e.target.closest('.picture'); // Проверяем нажатие на элемент .picture
  if(target) { // если клик был по target
    let old = option.querySelector('.picture.active'); // находим в родителе активный элемент
    if(old) old.classList.remove('active'); // если он есть, то удаляем активный класс
    target.classList.add('active'); // И добавляем на тот, по которому был клик.
  }
})

.option {
  display: flex;
}

.picture {
  width: 30px;
  height: 30px;
  background: #ccc;
  margin-right: 10px;
}

.picture.active {
  background: green;
}

<div class="option">
  <div data-id="0" class="picture picture1"></div>
  <div data-id="1" class="picture picture2"></div>
  <div data-id="2" class="picture picture3"></div>
</div>

Про делегирование событий

БЛОГ НА HUSL

Как добавить разные классы разным элементам массива?

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