Как правильно написать условие?

Question

[Aleksandr]

Есть вот такой код html

<div class="swiper-slide slide1">
	<div class="wrapp">
		<div class="animations">
			<div class="anim anim0 fadeUp">
				<img src="img/anim0.png" height="105" width="1200" alt="">
			</div>
			<div class="anim anim1 slideRight">
				<img src="img/anim1.png" height="48" width="589" alt="">
			</div>
			<div class="anim anim2 slideLeft">
				<img src="img/anim2.png" height="34" width="385" alt="">
				<span class="model">AS 350 B3<i>e</i></span>
			</div>
			<div class="anim anim3 slideRight">
				<img src="img/anim3.png" height="46" width="1200" alt="">
				<span class="model_description">
					<div>открывая горизонты</div>
				</span>
			</div>
		</div>
	</div>
</div>

Нужно написать условие, что если у класса swiper-slide имеется класс swiper-slide-active, то
классу animations добавляется класс animated.

С этим проблем нету, но что написать, чтобы постоянно проверял, есть ли такой класс? не использую setInterval

Точнее нужно, чтобы скрипт проверял, есть ли у слайдера swiper-slide класс swiper-slide-active, слайд переключился - опять проверил и т.д.

Comments

[WhiteSama]

лучше напишите что вы хотите в итоге, а то не очень понятно зачем так извращаться

[WhiteSama]

и откуда берется класс актив который

[Aleksandr]

Это слайдер swiper который. Он добавляется, когда слайд активен. Мне нужно, чтобы анимация появлялась на каждом активном слайде.

Answer 1

[Алексей Зуев]

А почему бы просто не воспользоваться api слайдера и обрабатывать callback?
Пример

Comments

[Aleksandr]

Действительно, не подумал. Спасибо

Answer 2

[makerkz]

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

var element = document.getElementsByClassName('swiper-slide')[0];

var observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    // Проверяете на тип изменения, наличие классов и т.д.
  });
});

observer.observe(element, {attributes: true});

Comments

[Aleksandr]

Никакой)

[makerkz]

Sashjkeee: это здорово, на самом деле :) Правда потом может случиться так, что наворотите своих костылей :C

[Aleksandr]

makerkz: Может) но все как-то руки не доходят до фреймворка)

[makerkz]

Sashjkeee: тут, честно говоря, все зависит от того, что планируется в дальнейшем, если планируете библиотеку писать, или плагин, или же, как в вашем случае (а у вас, я думаю, кода не так много), то лучше использовать vanilla-js, а если что-то большее - на уровне веб-приложения, то лучше использовать framework. Я бы в вашем случае обратил внимание на React, так как в нем довольно много vanilla-js, и в связи с этим он максимально гибок, да и набирает сейчас популярность. Ну или старый-добрый Angular :)

[makerkz]

makerkz: В котором, кстати, есть очень простые для использования механизмы watching'а

[Aleksandr]

makerkz: Я вот смотрю в сторону Ангулара)

Answer 3

[Леван]

if( $('.swiper-slide').hasClass("swiper-slide-active") ){
    $('.animations').addClass('animated');
}