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

Кекстаграм: завершаем функцию переключения

Ошибку с выделением активного переключателя исправили. Осталась вторая ошибка: фильтр на большой фотографии применяется неправильно. Причина — лишние классы фильтров у большой фотографии. Вот что происходит с HTML, когда функция переключения вызывается несколько раз:

<div class="photo walden toaster kelvin"></div>

Чтобы исправить ошибку, надо удалять классы фильтров у блока фотографии при каждом переключении. Но класс photo удалять нельзя. Классы фильтров мы знаем, ведь они хранятся в data-атрибутах переключателей.

Поэтому в том же цикле, где сбрасывается класс active, можно у каждого переключателя брать название фильтра и удалять этот класс у большого фото:

for (var j = 0; j < controls.length; j++) {
  ...
  photo.classList.remove(имя фильтра из dataset-атрибута переключателя);
}

И ещё одна важная деталь. Переменная photo теперь используется в самом начале функции, поэтому мы вынесем строчку поиска переменной из функции в самый верх кода:

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

А внутри функции переменную photo надо удалить. Заодно мы ускорим работу скрипта, избавившись от ненужного поиска элемента .photo, который происходил при каждом переключении фильтра.

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

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

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

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

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

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