Задать вопрос
@Richswitch
junior

Как пересчитать дочерние узлы в DOM при этом добавляя и удаляя классы?

Привет!
Есть такой HTML код:
<div id="presentation" class="presentation__website">
								<div class="presentation__website__image1"></div>
								<div class="presentation__website__image2"></div>
								<div class="presentation__website__image3"></div>
								<div class="presentation__website__image4"></div>
							</div>


необходимо пересчитать дочерние узлы #presentation и добавлять/удалять классы.
Работать будет как слайд шоу, классы будут анимировать картинки.

У меня есть и js:
setInterval (slideShow, 4000);

var prtn = document.getElementById('presentation');

function slideShow() {
		for (var i = 0; i < prtn.length; i++) {
			prtn[i];
		}
		
};


как написать на языке фразу "пересчитать друг за другом каждый дочерний элемент родительского div`а с id=#presentation и добавить класс .animation в текущий div, а все остальные удалить"
  • Вопрос задан
  • 302 просмотра
Подписаться 1 Оценить 2 комментария
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Согласитесь, нет необходимости перебирать все дочерние элементы. Достаточно знать индекс элемента, которому назначен класс в данный момент - у него класс удаляем, следующему добавляем.

Кому, какой класс и с каким интервалом времени надо переключать:

const elements = document.querySelector('#presentation').children;
const className = 'animation';
const delay = 1000;

Переключаем:

let i = elements.length - 1;

setInterval(() => {
  elements[i].classList.remove(className);
  i = (i + 1) % elements.length;
  elements[i].classList.add(className);
}, delay);

или

(function next(i) {
  elements.item(i).classList.toggle(className, false);
  i = -~i % elements.length;
  elements.item(i).classList.toggle(className, true);
  setTimeout(next, delay, i);
})(~-elements.length);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы