comment changer des cours sur clic

Question

Je structure:

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

    </tr> 
    <tr> 
     <td> 
      <a href="#" class="xx">Two</a> 
     </td> 

    </tr> 
    <tr> 
     <td> 
      <a href="#" class="xx">Three</a> 
     </td> 

    </tr> 
</table> 

CSS:

.xx { 
    border: 5px solid green;  
} 

.yy { 
    border: 5px solid red;  
} 

maintenant clic de <a> il est classe devrait se changer. à-dire si elle est « xx » il devrait tourner « yy » et vice-versa, et le reste du <a> devrait rester tel qu'il est, j'ai essayé quelque chose comme (ref: how to change class of <a> tags in jquery)

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

mais le tir travail De cette façon, j'ai essayé de modifier le code, mais ça ne marche pas. Quelqu'un peut-il aider?

EDIT: Peut b ma question n'a pas été assez claire: si je clique sur 2 <a>/tout autre <a> il devient rouge et reste de l'étiquette doit être green.i.e. Si le <a> est de couleur rouge, alors il devrait devenir vert et le reste devrait être en rouge, et vice versa. EDIT pour une exigence plus claire (basée sur les réponses de sje397): disons que je clique sur une classe xx/yy et que je la clique à nouveau cela devrait changer c'est-à-dire si xx alors ça devrait revenir à yy, Si vous cliquez à nouveau dessus, il devrait revenir à xx. -

Answer 1

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

EDIT (en raison du commentaire de l'auteur)

Si vous voulez avoir une seule étiquette mis en évidence (par exemple ayant la classe « yy ») et tous les autres ayant la classe « xx », vous peut faire:

$("a").click(function() { 
    var $this = $(this); // this is just for performance 
    if(!$this.hasClass('yy')) 
    $('.yy').toggleClass("yy").toggleClass("xx"); 
    $this.toggleClass("yy").toggleClass("xx"); 
});​ 

en général, cependant, vous devez utiliser la propriété « en cascade » de simplifier les choses css. Par exemple, plutôt que de changer de classe, ajoutez simplement une classe supplémentaire à l'élément sélectionné. Ensuite, organisez votre CSS afin que dans ce cas plus spécifique, les propriétés d'affichage que vous voulez pour le surlignage de surbrillance. Par exemple, avec ce CSS:

.xx { 
    border: 5px solid green;  
} 

.xx.yy { 
    border: 5px solid red;  
} 

Vous avez juste besoin d'ajouter et de supprimer la classe « yy » et laisser le « xx » seule classe.

Answer 2

Voir mise à jour ci-dessous

Si la structure ne changera jamais, vous pouvez le faire:

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

Comme ceci: http://jsbin.com/ecidi3

Ou vous pouvez faire cela un peu plus court (example), mais je ne voulais pas sacrifier la clarté ci-dessus:

$("a.xx, a.yy").click(function() { 
    var $this = $(this); 
    var classes = $this.hasClass("xx") ? ["xx", "yy"] : ["yy", "xx"]; 
    $this.removeClass(classes[0]).addClass(classes[1]); 
}); 

Si votre structure peut changer, vous pourriez envisager live:

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

Comme ceci: http://jsbin.com/ecidi3/2 Ceci a l'avantage qu'il gardera automatiquement de fonctionner même si vous ajoutez plus de liens. Et bien sûr, vous pouvez changer le corps comme indiqué ci-dessus (example) si vous le voulez un peu plus court. Depuis votre mise à jour, il semble que vous ne souhaitiez pas simplement activer ce lien, mais que ce soit exclusif. Alors:

$("a.xx, a.yy").click(function() { 
    var $this, c; 
    $this = $(this); 
    c = $this.hasClass("xx") 
      ? {us: "yy", them: "xx" } 
      : {us: "xx", them: "yy" }; 
    $("a." + c.us).removeClass(c.us).addClass(c.them); 
    $this.removeClass(c.them).addClass(c.us); 
}); 

exemple en direct http://jsbin.com/ecidi3/5

Et bien sûr, en utilisant live vous suffit de changer la façon dont vous le brancher:

$("a.xx, a.yy").live("click", function() { 
      // ^-- change here 

Un exemple concret: http://jsbin.com/ecidi3/6