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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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