Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Подскаите как менять класс у елемента в зависимость от класса другово елемента (https://javascript.ru/forum/misc/58223-podskaite-kak-menyat-klass-u-elementa-v-zavisimost-ot-klassa-drugovo-elementa.html)

NirVanea 10.09.2015 11:29

Подскаите как менять класс у елемента в зависимость от класса другово елемента
 
Подскажите как менять класс у элемента в зависимость от класса другого элемента.

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

<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a href="#1" >...</a>
			</h4>
		</div>
		<div id="1" class="panel-collapse in">..</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a href="#1" >...</a>
			</h4>
		</div>
		<div id="1" class="panel-collapse">..</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a href="#1" >...</a>
			</h4>
		</div>
		<div id="1" class="panel-collapse">..</div>
	</div>



Класс "in" добавляется каким плагином в случае если пункт аккордеона открыт и удаляется если закрыт.

Подскажите пожалуйста как с помощью jQuery при клике на ссылку проверять если существует класс "in" то у загаловка "<h4 class="panel-title">" добавляется класс "active" а если нету то удаляет класс "active" у даного елемента.

Lemme 10.09.2015 11:58

// вешаем событие click на .panel-title a
$('.panel-title a').click(function() {
        // находим элемент .panel-collapse
	var $panelC = $(this).closest('.panel').find('.panel-collapse');
        // находим .panel-title
	var panelTitle = $(this).closest('.panel-title');
        //  если у $panelC есть класс in
	if ($panelC.hasClass('in')) {
                // то добавляем $panelTitle класс active
		$panelTitle.addClass('active');
	}
        // иначе
	else {
                // убираем класс active
		$panelTitle.removeClass('active');
	} 
});

closest() - https://api.jquery.com/closest/
find() - https://api.jquery.com/find/

NirVanea 10.09.2015 12:44

Lemme , большое спасибо, всё работает отлично. Но так как я толь начинаю изучать javascript хотел тебя попросит прокомментировать код что я тоже понял как это чудо работает.

Lemme 10.09.2015 13:13

NirVanea, добавил комменты.

NirVanea 10.09.2015 13:51

Lemme, большое спасибо, теперь понял логику


Часовой пояс GMT +3, время: 15:35.