Jquery更改圖標切換爲表格行

Question

現在我有以下Jquery，它在單擊表格行時會關閉它下面的行。

<script type="text/javascript"> 
$(function() { 
    $("tr.spaceUnder").hide(); 
    $('tr:not(.spaceUnder)').click(function() { 
     $(this).nextUntil('tr:not(.spaceUnder)').toggle(); 
    }); 
}); 

現在我想的是，當我點擊它切換其下的行的行，是顯示一個打開/關閉圖標或+/-什麼。

這是行看起來像哪個開關。

<tr class="countryRow categoryHeader"> 
     <td colspan="3" class=""> 
      <span class="listItemHeader"> 
       <%#((Item)Container.DataItem)["Name"]%> 
      </span> 
     </td> 
     <td> 
      <a href="#" style="float: right;"><img width="20" src="/Images/sBackTopPic.png"></a> 
     </td> 
    </tr> 

所以在撥動我想更改CSS類的A HREF的行中的第二個TD，因此在初始加載顯示關閉圖標，因爲，然後單擊打開icon..then當點擊再次關閉圖標。所以我想知道如何使用當前的切換邏輯在我的href中添加css類。

Answer 1

它正在混淆你正在嘗試做什麼。但是在你的點擊函數下面，它會檢查錨點以查看它是否具有第一類，如果它確實刪除了該類並添加另一個類。如果不是相反的話。

$(function() { 
     $("tr.spaceUnder").hide(); 
     $('tr:not(.spaceUnder)').click(function() { 
      $(this).nextUntil('tr:not(.spaceUnder)').toggle(); 
      if($('a', this).hasClass("class-one")) 
      { 
       $('a', this).removeClass("class-one"); 
       $('a', this).addClass("class-two"); 
      { 
      else 
      { 
       $('a', this).removeClass("class-two"); 
       $('a', this).addClass("class-one"); 
      } 
     }); 
    });