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

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

Ошибку с выделением активного переключателя исправили. Осталась вторая ошибка: фильтр на большой фотографии применяется неправильно. Причина — лишние классы фильтров у большой фотографии. Вот что происходит с 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, который происходил при каждом переключении фильтра.

Хорошо владеете JavaScript, но до сих пор не освоили Node.js? Записывайтесь на профессиональный курс «Node.js. Профессиональная разработка REST API». Цена 12 000 ₽.

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

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

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

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

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

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