jQuery ajouter la classe et de supprimer tous les autres

J'ai donc quelques nav ancres. Je veux changer de base de schémas de couleurs sur la page lorsqu'ils sont cliqués. La seule façon que j'ai pu faire, c'est avec le code ci-dessous.

Il fonctionne très bien, mais je ne peux pas aider mais pense qu'il y a une façon plus élégante. Quelqu'un sait si il est possible de supprimer les classes dans un immonde coup?

EDIT: Cela aurait pu être plus clair. Je ne voulais pas que les classes d'origine disparu. Juste les classes ajouté avec jQuery, je suppose. Désolé pour la confusion.

Grâce.

EDIT: VOIR CE VIOLON

Essayé de mettre en œuvre toutes les solutions.

obtenir un "{"error": "Veuillez utiliser la demande POST"}" si...

EDIT: c'est à cause de href="?" vs href="#" comme l'a souligné.

    $(".home").click(function() {
        $(".primary-color").addClass("one");
            $(".primary-color").removeClass("two"); 
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("four");    
            $(".primary-color").removeClass("five");           
    });

    $(".services").click(function() {
        $(".primary-color").addClass("two");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("four");    
            $(".primary-color").removeClass("five");       
    });

    $(".pricing").click(function() {
        $(".primary-color").addClass("three");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("two");     
            $(".primary-color").removeClass("four");    
            $(".primary-color").removeClass("five");       
    });

    $(".special-thing").click(function() {
        $(".primary-color").addClass("four");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("two"); 
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("five");   
    });

    $(".contact").click(function() {
        $(".primary-color").addClass("five");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("two"); 
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("four");     
    });

Pour info: jsfiddle.net c'est pratique pour les tests rapides pour voir si quelque chose fonctionne de la façon dont vous en avez besoin.
Oui. Je suis un fervent utilisateur. Je viens d'écrire tout un n'a pas d'enregistrer et de fraîcheur. urg. m'a fallu une minute pour l'obtenir, il écrit de nouveau. Et maintenant, avec une erreur que je n'ai jamais vu. ? un
Je ne sais pas quel navigateur vous utilisez, mais j'ai trouvé que je comprends de la console de Firebug mieux que la console de chrome.
Ok, vous avez remarqué que vous violon et voici le code de ma réponse ( la partie inférieure de ma réponse ) installé dans votre violon: jsfiddle.net/lollero/EXq83/5 -- Dans votre code, vous supprimez toutes les classes à partir d'un élément, puis essayez de cibler l'élément avec une classe qu'il n'a pas, depuis qu'il a été supprimé. Aussi, comme un mannequin href="" utilisation href="#" au lieu de ?.
N'en sais rien, mais jsfiddle ne semble pas aimer le ?. Après, il est remplacé par #, le code fonctionne comme il se doit ( comme dans le premier clic fonctionne correctement, après qu'elle ne tient pas la façon dont je l'ai expliqué ci-dessus ).

OriginalL'auteur sheriffderek | 2012-12-11

Vous pourriez faire de cette façon

http://jsfiddle.net/lollero/ZUJUB/

$(document).ready(function() {
    $(".home, .services, .pricing, .special-thing, .contact").on("click", function() {

        $(".primary-color")
            //Remove all classes
            .removeClass()
            //Put back .primary-color class + the clicked elements class with the added prefix "pm_".
            .addClass('primary-color pm_' + $(this).attr('class') );       
    });
});

CSS:

.primary-color {
    width: 100px;
    height: 100px;
    border: 1px solid #e1e1e1;

}


.pm_services { background: red; }
.pm_home { background: green; }

HTML:

<div class="services">services</div>
<div class="home">home</div>

<div class="primary-color">Primary-color</div>

ou quelque chose comme ceci:

http://jsfiddle.net/lollero/ZUJUB/1/

Cela s'inscrirait dans le cas des OP de la structure: http://jsfiddle.net/lollero/EXq83/5/

jQuery:

$(document).ready(function() {
    $("#buttons > div").on("click", function() {

        $(".primary-color")
            //Remove all classes
            .removeClass()
            //Put back .primary-color class + the clicked elements index with the added prefix "pm_".
            .addClass('primary-color pm_' + ( $(this).index() + 1 ) );       
    });
});

CSS:

.primary-color {
    width: 100px;
    height: 100px;
    border: 1px solid #e1e1e1;

}


.pm_1 { background: red; }
.pm_2 { background: green; }

HTML:

<div id="buttons">
    <div class="services">services</div>
    <div class="home">home</div>
</div>

<div class="primary-color">Primary-color</div>

Depuis que l'indice de la mère de li est utilisé, vous pouvez ajouter et supprimer des éléments de menu sans avoir besoin de toucher au javascript. Aussi, vous voudrez peut-être ajouter e.preventDefault(); pour prévenir le lien de tirer sur cliquez sur. jsfiddle.net/lollero/EXq83/17 ( Avis de l'e à l'intérieur les événements click crochets en haut )

OriginalL'auteur Joonas

6

Juste $(".primary-color").removeClass() (sans préciser la classe) devrait fonctionner!

Ou, si vous juste besoin de dépouiller les classes (en laissant les autres, d'importantes classes de), vous pouvez les regrouper en 1 appel, en séparant les classes par des espaces:
```
$(".primary-color").removeClass("two three four five");   
```
Ooooh, ça fonctionne?! edit: Juste essayé, oui il le fait!
Celui-ci est grand. Reste encore à écrire, ce qui, selon la portée, pourrait être difficile à l'échelle. Mais les coupes mes lignes à 10%. Merci.

OriginalL'auteur c_kick
5

Vous canettes utiliser la méthode attr,
```
$(".xxx").attr("class","newclass");
```
OriginalL'auteur Never Back Down

Cela devrait fonctionner:

$(".home").click(function() {
   $(".primary-color").removeClass().addClass("one");          
});

OriginalL'auteur aNewStart847

4

vous pouvez utiliser removeClass() sans paramètre pour supprimer toutes les classes

voir: http://api.jquery.com/removeClass/
```
$(".primary-color").removeClass();
```
ou d'utiliser l'espace séparées notation pour supprimer vos classes:
```
$(".primary-color").removeClass('one two');
```
ou un ensemble entièrement nouveau de l'attribut de classe par attr():
```
$(".primary-color").attr('class','one two');
```
OriginalL'auteur vlcekmi3
2

vous pouvez supprimer toutes les classes à partir d'un élément en faisant
```
$("#item").removeClass();
```
Appel removeClass avec pas de paramètres de supprimer l'ensemble de l'élément de classes.

Le faire avant de vous faire addClass et votre code sera réduit

Pas de continuer. Je suis de regarder en firebug et c'est juste l'ajout de classes jusqu'à ce qu'ils sont tous là et puis il se termine juste et se coince. Sonnait comme il serait doux de truc. Tout ce que j'ai pu faire de travers? Je viens de le sur clic - supprimer - et de les ajouter.
vous pouvez poster votre code?
Mis à jour le jsfiddle dans la question. L'un des événements utilise ce code. Il supprime définitivement toutes les classes. J'ai initiale des classes que je ne veux pas bande. Il semble tout simplement aller de morts.
vous pouvez supprimer un ensemble de classes à l'aide de plusieurs paramètres lorsque vous appelez la suppression de la classe de fonction --> .removeClass('deux');

OriginalL'auteur mr_lewjam
0

Je crois que c'est ce que vous cherchez. Plutôt que d'ajouter et de soustraire, il vous suffit de définir l'attribut de classe. Accordé, si il y a des cours que vous souhaitez conserver, vous pouvez définir ceux que bien, mais si que n'est pas approprié, vous devriez probablement envisager de le faire d'une autre manière entièrement.
```
$(".home").click(function() {
    $(".primary-color").attr("class", "one");
});
```
OriginalL'auteur Neil

Beaucoup de contractiosn peut être appliquée. Sans connaître les détails de votre code, il est difficile de faire plus de changements.

$(".home, .contact, .special-thing, .pricing, .services").click(function() {
  $(".primary-color")
    .addClass("one")
    .removeClass("two three four five");          
});

OriginalL'auteur michaelward82

Vous devez vous connecter pour publier un commentaire.