Добавление класса блоку в зависимости от наличия класса в другом блоке

Question

Есть такая html разметка:

<div id="header"></div>
<div id="carousel">
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
</div>

В блоке carousel - слайдер (например, slick). Он листается автоматически, соответственно у блоков 1, 2 и 3 появляется/исчезает класс "active". При загрузке страницы класс "active" у блока 1 всегда по умолчанию. Мне нужно, чтобы при принятии каждым из слайдов активного класса к блоку header добавлялся определённый класс. Например:

блок 1 имеет класс "active" - header имеет класс "header-blue"

блок 2 имеет класс "active" - header имеет класс "header-red"

блок 3 имеет класс "active" - header имеет класс "header-green"

В js я не силён, смог наваять только такое:

if ($("#1").hasClass("active") ) {
$("#header").toggleClass("header-blue");
}
if ($("#2").hasClass("active") ) {
$("#header").toggleClass("header-red");
}
if ($("#3").hasClass("active") ) {
$("#header").toggleClass("header-green");
}

При загрузке страницы оно работает, далее конечно нет. Прошу помощи у сообщества.

Answer 1

Замените скрипт который листает слайды на этот

headerClasses = new Array("header-blue","header-red","header-green"); //массив с классами
function nextSlide(Case, header, index){
  $(Case).children('div').removeClass('active');
  var el = $(Case).children('div:eq('+index+')');
  $(el).addClass('active');
  var newClass = headerClasses[index];
  $(header).removeClass()
  $(header).addClass(newClass);
  index++;
  if(index >= headerClasses.length) index = 0;
  setTimeout(nextSlide, interval, Case, header, index);
}

interval = 2000;//интервал с которым листаются слайды в милисекундах
var Case = $('#carousel');//родительский элемент слайдов
var header = $('#header');
var index = 0;
nextSlide(Case, header, index);

или вот демонстрация работы кода https://jsfiddle.net/2jkLhavz/

БЛОГ НА HUSL

Добавление класса блоку в зависимости от наличия класса в другом блоке

Ответы (1 шт):