0

В массиве три 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.

1
  • Вы хотите сделать активный класс? 12 апр 2022 в 17:37

2 ответа 2

1

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

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>

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

0

При клике на элемент мы удаляем класс 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);
  });
});
2
  • Зачем проходить по всем элементам и удалять класс, которого может даже не существовать? Не проще ли сразу к элементу с классом correct обратиться?
    – De.Minov
    12 апр 2022 в 17:53
  • @De.Minov, верно, можно 12 апр 2022 в 18:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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