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

Кекстаграм: знакомимся с циклом

Если нужно совершить несколько однотипных действий, то можно использовать цикл for. Вот его синтаксис:

for (var num = 0; num <= 5; num++) {
  console.log(num);
}
// Выведет в «консоль» числа 0, 1, 2, 3, 4 и 5

О циклах подробно рассказывается в части «Циклы».

Ранее мы использовали метод querySelector, который возвращает только один элемент: первый элемент, соответствующий селектору. Другой метод querySelectorAll возвращает все элементы, соответствующие селектору. Подробно об этом методе рассказывается в части «Знакомство с Javascript в браузере».

С помощью for удобно перебирать найденные элементы:

var controls = document.querySelectorAll('.toggle-controls button');
for (var i = 0; i < controls.length; i++) {
  controls[i].innerHTML = 'переключатель';
}
// Во все элементы списка переключателей запишется строка «переключатель».

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

Лучше найти все переключатели внутри списка и перебрать их с помощью цикла. И внутри цикла задавать название каждому переключателю.

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

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

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

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

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

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