jquery class removeClass

Version imprimable

06/07/2016, 18h04
PIEPLU

jquery class removeClass
Bonjour,

Je voudrais remplacer une class par une autre mais je ne comprend pourquoi je rentre pas dans cette boucle.
Code:

1 2 3 4 5 if($("body").hasClass("container")){ alert('container'); // $('body').removeClass('container'); }
J'ai plusieurs container, est ce que ca peut etre le problème ? Comment je peux dire que je veux le faire sur le premier trouvé ?

Merci
06/07/2016, 18h39
ABCIWEB

Salut,

Quelle boucle vois-tu ici ? Le code que tu donnes regarde simplement si le tag body possède la classe "container".

Si tu veux sélectionner tous les éléments de ta page utilises le sélecteur all , mais c'est extrêmement déconseillé.

Je sais pas trop ce que tu veux faire mais s'il te faut lister tous les éléments du DOM pour regarder ceux qui ont la classe container tu as certainement un problème de méthodologie. Il faut absolument éviter de faire des recherches sur toute la page et donc se débrouiller pour cibler un minimum. Quand tu fais du javascript, il faut penser à faire un code html suffisamment structuré pour que javascript puisse cibler les recherches.
07/07/2016, 08h23
PIEPLU

Alors ce que je ne comprend pas c'est pourquoi, alors que j'ai une class container, je ne vois pas apparaitre l'alerte.

L'idée au final, car je m'y prend peut être mal.

J'ai un bouton, et en cliquant dessus, je suis switcher container=>container-fluid, puis un nouveau clique et je repasse de container-fluid=>container.

Merci de votre aide.
07/07/2016, 08h37
Invité
Bonjour,

avec le bout de code HTML qui va avec, ce serait mieux...

Ici, on suppose que tu as :

Code:

<body class="container">
- .toggleClass()
Code:

toggleClass('container container-fluid');
07/07/2016, 08h46
PIEPLU
J'ai tenté aussi le toggleClass, en vain.

Mon code est ainsi.

Le bouton :

Code:

<div class="button link-like btn-wide-screen">Zoom</div>

Le HTML :

Code:

<body>...<div class="container">....

Le JS :
Code:

1 2 3 $('.btn-wide-screen').click(function() { $("body").toggleClass('container', 'container-fluid'); });
Merci
07/07/2016, 08h56
Invité
Comme quoi c'est UTILE de montrer le HTML !

Ta class "container" n'est pas appliquée à la balise <body>, mais sur un <div>. :roll:

Le mieux est encore d'identifier clairement le div à cibler :

Code:

<div id="ce-div" class="container">container1</div>
Code:

1 2 3 $('.btn-wide-screen').on( 'click', function() { $('#ce-div').toggleClass('container container-fluid'); });
07/07/2016, 09h05
PIEPLU
Donc, j'ai fait comme tu as dis :
Code:

1 2 3 $('.btn-wide-screen').click(function() { $('body').find('div.container:first-child').toggleClass('container', 'container-fluid'); });
Mais ca ne marche pas correctement. Ce qui se passe, c'est que les class container sont supprimées, et non remplacée par container-fluid.

Code:

<div class>...
07/07/2016, 09h07
Invité

J'ai mis à jour mon message précédent (après test).

Même chose si on met comme ça :
Code:

1 2 3 $('.btn-wide-screen').on( 'click', function() { $('#project').toggleClass('container', 'container-fluid'); });
Code:

<div class="container" id="project">

07/07/2016, 09h10
PIEPLU

Ah si c'est bon, j'avais pas vu une autre de tes modifs !!

Parfait !!!

MMerccii
07/07/2016, 09h11
Invité

Bon. Là, il faut apprendre à lire... ou à faire un simple copier-coller. :roll:

[EDIT] :ccool: Pense à : :resolu: