класс переключения jquery на ближайшем промежутке

0

Я пытаюсь заменить класс другим классом, когда заголовок панели нажат так:

Это в настоящее время не работает (переключает класс) - любые идеи?

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>
  • 0
    Можете ли вы включить HTML с элементами span.fa?
Теги:

1 ответ

5
Лучший ответ

Согласно документам 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

  • 1
    Вы должны указать, почему closest не работает

Ещё вопросы

Сообщество Overcoder
Наверх
Меню