如何改變類的<a>標籤的jQuery

Question

我有一個表的結構，類似的東西

<table style="width: 100%;"> 
    <tr> 
     <td> 
      <a href="#" class="xx">one</a> 
     </td> 
     <td> 
    </tr> 
    <tr> 
     <td> 
      <a href="#" class="xx">Two</a> 
     </td> 
     <td> 
    </tr> 
    <tr> 
     <td> 
      <a href="#" class="xx">Three</a> 
     </td> 
     <td> 
    </tr> 
</table> 

CSS：

.xx { 
    border: 5px solid green;  
} 

.yy { 
    border: 5px solid red;  
} 

現在我想到的是，如果我點擊第一行/ 1 <a>其邊界將變成紅色，且在<a>休息綠色的，如果我再次clcik在第1行/ 1 <a>應該變成綠色。另外，如果我點擊任何其他<a>那麼只有它應該變爲紅色，但<a>的其餘部分應爲綠色。

我想：

$(function() { 
    $("a.xx").click(function() { 
     if ($(this).hasClass("xx")) { 
      $(this).removeClass("xx").addClass("yy"); 
     } else { 
      $(this).removeClass("yy").addClass("xx"); 
     } 
    }); 
}); 

但它不工作。

Answer 1

您需要調整處理了一下，你可以這樣做使用.toggleClass()交換類，像這樣：

$("a.xx").click(function() { 
    $(".yy").not(this).toggleClass("xx yy"); 
    $(this).toggleClass("xx yy"); 
}); 

You can give it a try here，.toggleClass()需要用空格分隔多個類，所以只要將2班同時通過。在這種情況下，您想要切換到.yy以及當前點擊的元素。

或者，由於.yy在CSS定義的最後一個（和覆蓋相同的屬性），你只需添加這個類，像這樣：

$("a.xx").click(function() { 
    $(".yy").not(this).removeClass("yy"); 
    $(this).toggleClass("yy"); 
});​ 

You can give it a try here。

Answer 2

這是因爲你附加處理程序只對a.xx click事件。您還需要一個用於a.yy單擊事件。我會建議是添加另一個類的這些亮點，然後從那裏，像這樣：

<a href="#" class="xx highlight"></a> 

$('a.highlight').click(function({ 
    $('a.xx,a.yy').toggleClass('xx yy'); 
}); 

Answer 3

您的代碼隻字未提轉向其他事情綠色。點擊時需要做兩件事：將所有東西都變成綠色，然後將當前的東西變成紅色。你正在做第二部分，但不是第一部分。

Answer 4

你只改變類的$（本），所以沒有其他的環節會改變顏色。

試試這個：

 $("a.xx").click(function() { 
      $('a.yy').removeClass('yy').addClass('xx'); 
      $(this).removeClass('xx').addClass('yy'); 
     });