- Теория
- Теория
Кекстаграм: завершаем переключатели
И снова улучшим код. В функции переключения есть проблема: в качестве параметра используются названия фильтра, по которому каждый раз происходит поиск переключателя. Но ведь можно передавать в функцию сами переключатели. Для этого.
1. Изменим обработчик внутри clickControl
:
Было: toggleFilter(control.dataset.filter);
Стало: toggleFilter(control);
2. Изменим параметр у toggleFilter
, теперь это не строка, а элемент:
Было: function toggleFilter(filterName)
Стало: function toggleFilter(control)
3. В toggleFilter
передаётся переключатель и искать его уже не надо, удаляем лишний код:
var control = document.querySelector('button.' + filterName);if (control) {
control.classList.add('active');
}
4. Название фильтра для фото теперь берём из data-атрибута переключателя:
Было: photo.classList.add(filterName);
Стало: photo.classList.add(control.dataset.filter);
А теперь вы самостоятельно сделаете последний штрих! При загрузке страницы должен быть выбран фильтр по умолчанию. Для этого нужно в конце кода добавить новую переменную, сохранить в неё нужный переключатель и с этой переменной вызвать функцию переключения.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.