Как при смене класса у одного элемента менять класс у другого?

Question

[zhyshy]

Добрый день!
Есть стандартная карусель на Bootstrap 4, в карусели 2 картинки - темная и светлая.

<div class="carousel-item night-bg"></div>
<div class="carousel-item day-bg active"></div>

Как сделать, чтобы при смени слайда, и назначении класса, например "night-bg active", у другого элемента, не из карусели, добавлять какой-нибудь дополнительный класс, а при "day-bg active" этот класс убирать?

Answer 1

[Антон Усачев]

У Bootstrap 4 карусели есть events, которые можно и нужно использовать. Чтобы лучше подстроить события под ваши нужды, читайте документацию, она в сети не прячется. Примерно так должно получиться:

$('.carousel').on('slide.bs.carousel', function(event) {
	var slideIndex = event.to, // индекс слайда, к которому переходим
		activeSlide = $('.slide').eq(slideIndex), // активный слайд
		myOuterElem = $('.my-outer-element'); // некий элемент вне карусели

	if(activeSlide.hasClass('night-bg')) {
		myOuterElem.addClass('my-new-class'); // добавляем класс к внешнему элементу если ночь
	} else
	if(activeSlide.hasClass('day-bg')) {
		myOuterElem.removeClass('my-new-class'); // убираем класс у внешнего элемента если день
	}
});

Comments

[zhyshy]

Спасибо!

Answer 2

[Rsa97]

Вариант 1: найти, где меняется класс и добавить смену класса другого элемента.
Вариант2: MutationObserver