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

Кекстаграм: завершаем переключатели

И снова улучшим код. В функции переключения есть проблема: в качестве параметра используются названия фильтра, по которому каждый раз происходит поиск переключателя. Но ведь можно передавать в функцию сами переключатели. Для этого.

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);

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

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик». Всего от 4690 ₽в месяц.

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

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

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

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

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

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