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

Question

[MyQuestion]

Добрый день!

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

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('').

Как это работает?

Comments

[Gary_Ihar]

remove[3] - нет, так нельзя делать. Смотри сюда КЛИК remove( String [,String] ) - только строка(-и).

Answer 1

[Alex]

Это потому, что каждая итерация цикла перезаписывает функции addSwiper и removeSwiper. Как результат после завершения цикла в этих переменных остаются функции которые туда были записаны при последней итерации -- то есть для обработки последнего элемента массива.

Comments

[MyQuestion]

Да уж... мне пожалуй, снова нужно начинать, прямо с основ...

[MyQuestion]

А как можно вытащить переменную из for, что бы она была видимой из вне? В строгой нотации js.

[MyQuestion]

Не понимаю, почему если я смотру внутри цикла, то я получаю массив элементов. А если я смотрю снаружи цикла, то я получаю его последний элемент? Как мне получить массив элементов?

Я пытаю объявить переменную снаружи, что бы потом ссылаться на результат цикла.

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

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

Answer 2

[Денис Соколов]

Вроде должно работать

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

Comments

[MyQuestion]

Получается, что функция запустится прямо из for, чего мне не очень хочется...

Вот весь код, который получился:

const galleryItems = document.querySelectorAll('.gallery__slide');
const myScriptJs = document.querySelector('#last-js');
const setScriptElement = document.createElement('script');
const mediaQuery = window.matchMedia('(max-width: 580px)');


mediaQuery.addListener(loadScripts);

function loadScripts() {
  if (mediaQuery.matches == true) {
    setScriptElement.innerHTML = '';
    setScriptElement.setAttribute('class', 'addScript');
    setScriptElement.setAttribute('src', '"js/swiper-bundle.min.js"');
    myScriptJs.insertAdjacentElement('beforeBegin', setScriptElement);
    addSwiper();
  }
  else if (setScriptElement) {
    const addScript = document.querySelectorAll('.addScript');
    addScript[0].remove();
    removeSwiper();
  }
}

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

function addSwiper(item) {
  item.classList.add('swiper-slide');
}

function removeSwiper(item) {
  item.classList.remove('swiper-slide');
}

[Денис Соколов]

ну можно и так

const galleryItems = document.querySelectorAll('.gallery__slide');

for (let i = 0; i < galleryItems.length; i++) {
  let item = galleryItems[i];
  item.classList.add('swiper-slide');
  item.classList.remove('swiper-slide');
}

[MyQuestion]

Денис Соколов,
Нет, это не то, мне нужно из функции loadScripts(), вызвать другую функцию, при срабатывание условия.

Я не хочу, что бы функции сами себя вызывали. Я попытался, отталкиваясь от Вашего метода, передать параметры в функцию loadScripts, но почему-то я получаю только один элемент, вместо массива элементов.

[MyQuestion]

Денис Соколов,
В общем, сделал так:

const myScriptJs = document.querySelector('#last-js');
const setScriptElement = document.createElement('script');
const mediaQuery = window.matchMedia('(max-width: 580px)');
let galleryItem;

mediaQuery.addListener(loadScripts);

function loadScripts() {
  if (mediaQuery.matches == true) {
    setScriptElement.innerHTML = '';
    setScriptElement.setAttribute('class', 'addScript');
    setScriptElement.setAttribute('src', '"js/swiper-bundle.min.js"');
    myScriptJs.insertAdjacentElement('beforeBegin', setScriptElement);
    Array.from(galleryItems).forEach(galleryItem => {
      galleryItem.classList.add('swiper-slide')
    })
  }
  else if (setScriptElement) {
    const addScript = document.querySelectorAll('.addScript');
    addScript[0].remove();
    console.log(addScript);
    Array.from(galleryItems).forEach(galleryItem => {
      galleryItem.classList.remove('swiper-slide')
    })
  }
}