jQuery的切換類

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/

「對於組中的每一個元素，獲得通過自身測試元素和穿越了通過其在DOM樹的祖先選擇相匹配的第一個元素。」

所以在你的情況下，跨度是在點擊元素內，所以你需要使用找到而不是最接近。

試試這個。 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/

在這裏閱讀更多：https://coderwall.com/p/wxjljq