• Теория
  • Теория

Кекстаграм: используем цикл

Начнём исправлять ошибки в функции переключения фильтров, которые возникают, когда она запускается несколько раз.

Первая ошибка заключается в том, что все переключатели подсвечиваются как активные. Причина в том, что внутри функции класс active добавляется текущему переключателю, но не удаляется у ставших неактивными.

Простейшим решением проблемы будет сначала удалять класс active у всех переключателей, а затем добавлять его текущему.

На предыдущем шаге мы уже находили все переключатели и сохраняли их в переменную controls:

var controls = document.querySelectorAll('.toggle-controls button');

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

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Только 5 дней цена 21 900 ₽22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Кекстаграм: Эпилог. JavaScript» тренажёра «Практика: фотоприложение с фильтрами» можно после регистрации и оформления подписки.