[19/25] Завершаем переключатели. С комментариями.

Курсы §34. Кекстаграм: Эпилог. JavaScript
1

На этом задании очень сильно завис, потому что хотелось понять, как работает это всё, а не выходило) В общем разобрался и немного поясняю:

var controls = document.querySelectorAll('.toggle-controls button');
// Ищем все эллементы с селектором .toggle-controls и добавляем их
// в массив controls
var photo = document.querySelector('.photo');
// Ищем эллемент с классом .photo

for (var i = 0; i < controls.length; i++) {
// Создаём цикл, в котором объявляем переменную i равную 0.
// Пока i меньше длины массива будет выполняться тело цикла, а
// i повышаться на один.
  controls[i].innerHTML = controls[i].dataset.filter;
  // Эллементу массива с номером i добавляем содержимое, равное
  // значению data-трибута filter у эллемента массива
  clickControl(controls[i]);
  // Запускаем функцию clickControl на эллемент массива
}
// Выполнили это для всех эллементов в массиве

function clickControl(control) {
// Объявляем функцию clickControl с параметром control (ему присвоится
// значение найденного эллемента массива)
  control.addEventListener('click', function () {
  // Вешаем на найденный эллемент обработку события "клик"
    toggleFilter(control);
    // По клику передаём найденный эллемент в функцию toggleFulter
  });
}

function toggleFilter(control) {
// Объявляем функцию toggleFilter с параметром control, значение которого
// равно эллементу, по которому произошёл клик
  for (var j = 0; j < controls.length; j++) {
  // Создаём цикл, в котором объявляем переменную j равную 0.
  // Пока j меньше длины массива будет выполняться тело цикла, а
  // j повышаться на один
    controls[j].classList.remove('active');
    // Удаляем класс active у эллемента массива
    photo.classList.remove(controls[j].dataset.filter);
    // Удаляем класс, равный значению атрибута data-filter,
    // у эллемента с классом photo, если он у него есть
  }
  // Выполнили это для всех эллементов в массиве

  control.classList.add('active');
  //Добавляем эллементу, по которому кликнули, класс active

  if (photo) {
    photo.classList.add(control.dataset.filter);
    // Добавляем эллементу с классно photo класс, равным атрибуты
    // data-filter эллемента, по которому кликнули
  }
}

var defaultFilter = document.querySelector('button.toaster');

toggleFilter(defaultFilter);

Мне не ясно только для чего используется if (photo). Может кто-то объяснить?

1 лайк