@MyQuestion
Начинающий Frontend

Почему remove удаляет класс, только последнего элемента массива?

Добрый день!

Мне нужно удалить класс для всех элементов массива.
Что я делаю:

const galleryItems = document.querySelectorAll('.gallery__slide');
let addSwiper;
let removeSwiper;

for (var i = 0; i < galleryItems.length; i++) {
  let galleryItem = galleryItems[i];
  addSwiper = function () {
    galleryItem.classList.add('swiper-slide');
  }
  removeSwiper = function () {
    console.log('false');
    galleryItem.classList.remove('swiper-slide');
  }
}


Remove удалит и добавит класс только последнему элементу массива. Я знаю, что для remove можно указать, какой именно элемент он будет удалять, например remove[3], если этого не указывать, видимо он возьмёт только последний элемент. Я видел решение с обращением к родителю и делали цикл по потомкам, что-то вроде items.children[i].remove('').

Как это работает?
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Это потому, что каждая итерация цикла перезаписывает функции addSwiper и removeSwiper. Как результат после завершения цикла в этих переменных остаются функции которые туда были записаны при последней итерации -- то есть для обработки последнего элемента массива.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Вроде должно работать
const galleryItems = document.querySelectorAll('.gallery__slide');

for (let i = 0; i < galleryItems.length; i++) {
  let galleryItem = galleryItems[i];
  addSwiper(galleryItem)
  removeSwiper(galleryItem)
}

function addSwiper(item) {
	console.log('Добавили', item.dataset.id)
  item.classList.add('swiper-slide');
}

function removeSwiper(item) {
  console.log('Удалили', item.dataset.id)
   item.classList.remove('swiper-slide');
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы