Я пытаюсь заменить класс другим классом, когда заголовок панели нажат так:
Это в настоящее время не работает (переключает класс) - любые идеи?
JQuery:
$('.panel-heading').click(function () {
if ($(this).closest('span.fa').hasClass('fa-caret-down')) {
$(this).closest('span.fa').removeClass('fa-caret-down').addClass('fa-caret-right');
}
else {
$(this).closest('span.fa').removeClass('fa-caret-right').addClass('fa-caret-down');
}
});
HTML:
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
<h4 class="panel-title">
Main <span class="fa fa-caret-down fa-lg pull-right"></span>
</h4>
</div>
Согласно документам jQuery, мы используем ближайший элемент find, который является внешним/верхним элементом.
http://api.jquery.com/closest/
"Для каждого элемента в наборе, получить первый элемент, соответствующий селектор путем проверки элемента себя и проходя через его предков в дереве DOM."
Поэтому в вашем случае диапазон находится внутри элемента с щелчком, поэтому вам нужно использовать find вместо ближайшего.
Попробуй это. http://jsfiddle.net/aamir/4RCMc/1/
$('.panel-heading').click(function () {
var $span = $(this).find('span.fa');
if ($span.hasClass('fa-caret-down')) {
$span.removeClass('fa-caret-down').addClass('fa-caret-right');
} else {
$span.removeClass('fa-caret-right').addClass('fa-caret-down');
}
});
Или попробуйте http://jsfiddle.net/aamir/4RCMc/3/
$('.panel-heading').click(function () {
$(this).find('span.fa').toggleClass( 'fa-caret-down', 'fa-caret-right' );
});
Подробнее здесь: https://coderwall.com/p/wxjljq
closest
не работает