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

Добавляем класс новостям из выбранной категории

Мы научились получать значение фильтра в тот момент, когда пользователь переключает категорию. Чтобы фильтрация заработала, нам нужно сравнить полученное значение с категорией каждой новости на странице.

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

// До
for (let article of articles) {
  if (article.dataset.category === 'cats') {
    …
  }
}

// После
filter.onchange = function () {
  for (let article of articles) {
    if (article.dataset.category === filter.value) {
      …
    }
  }
};

Проверим, что всё работает: изменим значение фильтра и убедимся, что подсветка добавляется новостям из выбранной категории.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

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

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

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

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

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

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