Добавление класса в div при условие что в другом div'е есть определенный класc?

Question

[Петр]

Добрый день. Возникла ситуация. Можно ли реализовать добавление определенного класса конкретному блоку, если в другом месте странице у другого конкретного блока присутствует определенный класс. И на оборот убрать класс, если у второго блока его тоже нет. Прошу прощения за столь сложную формулировку, ниже пример где более точно ясно. Заранее благодарю.

Описание примера. Если блока test-1 присутствует класс active, то блоку demo-1 тоже добавляется класс active. Если же у блока test-1 класс active пропадает, то и demo-1 тоже убирается.

Пример:

<div>					
	<div class="test-1 active">
		test 1
	</div>
	<div class="test-2">
		test 2
	</div>					
</div>

<div>
	<div class="demo-1 active">
		demo 1				
	</div>
	<div class="demo-2">						
		demo 2							
	</div>			
</div>

Comments

[Neyury]

При каком событии классы active добавляются/удаляются?

[Петр]

Neyury: прошу прощения, за только неловкое пояснение. для блоков test-1 test-2 класс active добавляться при помощи переключения в меню, либо в момент когда область отражается в браузере. Но это фреймформ готовый и ломать его не хочется.

Answer 1

[Егор Живагин]

If ( $('.test-1').hasClass('active') ) {
    $('.demo-1').addClass('.active');
}

А вот на что вешать проверку придумывайте сами, я ж не знаю, что за фреймворк у вас их добавляет) test-2 по аналогии
UPD: классы удаляются через removeClass('className')

Answer 2

[Neyury]

Вариант на чистом js

var test = document.querySelector(".test-1");
var demo = document.querySelector(".demo-1");
if( test.classList.contains("active"){
     demo.classList.add("active");
} else{
     demo.classList.remove("active");
}

Логика такая, проверяем есть ли у test класс. Если есть, то добавляем его в demo, иначе убираем его из demo (даже если его там нет, это не вызовет ошибки).

О том как добавлять, проверять, удалять, переключать классы на нативном js можно почитать на learn.javascript.ru

На какое событие вешать код - зависит от фраемворка. О том как повесить на элемент событие, можно почитать на learn.javascript.ru (вторая ссылка)

Comments

[Петр]

Я видимо немного глуп, прошу прощения сразу. Я добавил ваш пример. И что-то он отказываться работать. Идет появления элемента на странице с классом test-1 и не происходит добавления к классу demo-1 класса active

[Neyury]

этот код нужно оформить в функцию и вызывать эту функцию при скролле

[Петр]

Neyury: я был бы вам крайне признателен, если бы вы показали это наглядным примером.