Присвоение класса элемента при клике

Помогите пожалуйста.

const clicksertif = document.querySelector('.sertif-img');
if (clicksertif) {
    clicksertif.addEventListener("click", function(e) {
        
        clicksertif.classList.toggle('sertif-zoom');
    });
}

Суть в том, что есть куча элементов (слайды) с классом sertif-img. Мне нужно чтобы при клике на один их таких элементов присваивался класс именно для того элемента по которому кликнули. Это можно реализовать? Вообще у меня слайдер slick. И мне необходимо, чтобы при клике на изображение оно увеличивалось (типо на весь экран), а при повторном клике уменьшалось обратно. Может я вообще не правильно пытаюсь это реализовать? Может это делается иначе?


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

Автор решения: Алексей Мельников

Если хотите, чтобы на каждом элементе был прослушиватель, то для начала все их нужно получить, а уже потом вешать на каждый элемент прослушиватель. Например так:

// Получаем все элементы с классом .sertif-img
const clicksertif = document.querySelectorAll(".sertif-img");

if (clicksertif.length) {
  // Для каждого элемента навешиваем свой прослушиватель
  clicksertif.forEach((element) => {
    element.addEventListener("click", function (e) {
      this.classList.toggle("sertif-zoom");
    });
  });
}
→ Ссылка