Javascript 最近跨度上的jquery切换类

我试图用另一个类替换一个类，此时单击面板标题，如下所示：

这目前不起作用（切换类）-有什么想法吗

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:

主要

根据jQuery文档，我们使用最接近的方法查找元素，该元素位于元素的外部/上方

对于集合中的每个元素，通过测试元素本身并遍历其在DOM树中的祖先，获取与选择器匹配的第一个元素

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

试试这个

或尝试

---

阅读这里的更多信息：

根据jQuery文档，我们使用“最近”查找元素，该元素位于元素的外部/上方

对于集合中的每个元素，通过测试元素本身并遍历其在DOM树中的祖先，获取与选择器匹配的第一个元素

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

试试这个

或尝试

---

阅读此处的更多内容：

您可以将html包含在span.fa元素中吗？您可以将html包含在span.fa元素中吗？

  <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>

 $('.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');
     }
 });

 $('.panel-heading').click(function () {
     $(this).find('span.fa').toggleClass( 'fa-caret-down', 'fa-caret-right' );
 });