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