Question

我试图在单击面板标题时用另一个类替换类：

这目前无效（切换课程） - 任何想法？

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>

Answer 1

根据jQuery文档，我们使用最接近查找元素的外部/上部元素。

http://api.jquery.com/closest/

＆＃34;对于集合中的每个元素，通过测试元素本身并通过DOM树中的祖先遍历向上来获取与选择器匹配的第一个元素。＆＃ 34;

因此，在您的情况下，跨度位于单击元素内部，因此您需要使用查找而不是最接近。

试试这个。 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

最近的跨度上的jquery切换类

1 个答案: