jquery class removeClass

**PIEPLU** · 06/07/2016, 18h04

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ABCIWEB** · 06/07/2016, 18h39

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.

**PIEPLU** · 07/07/2016, 08h23

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.

Invité · 07/07/2016, 08h37

Bonjour,

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

Ici, on suppose que tu as :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body class="container">

.toggleClass()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

toggleClass('container container-fluid');

**PIEPLU** · 07/07/2016, 08h46

J'ai tenté aussi le toggleClass, en vain.

Mon code est ainsi.

Le bouton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Le HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Le JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	$('.btn-wide-screen').click(function() {
		$("body").toggleClass('container', 'container-fluid');
	});

Merci

Invité · 07/07/2016, 08h56

Comme quoi c'est UTILE de montrer le HTML !

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**PIEPLU** · 07/07/2016, 09h05

Donc, j'ai fait comme tu as dis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class>...

Invité · 07/07/2016, 09h07

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

**PIEPLU** · 07/07/2016, 09h09

Même chose si on met comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**PIEPLU** · 07/07/2016, 09h10

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

Parfait !!!

MMerccii

Invité · 07/07/2016, 09h11

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

[EDIT]

Pense à :

jquery class removeClass

jQuery

Discussions similaires

Partager

Partager