最近跨度上的jquery切换类答案

【问题标题】：jquery toggle class on closest span最近跨度上的jquery切换类
【发布时间】：2014-03-26 12:20:53
【问题描述】：

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

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

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>

【问题讨论】：

能否在 html 中包含 span.fa 元素？

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：