Appel d'évènement après un toggleClass

**actiproj** · 04/04/2014, 23h34

Bonjour

Dans le code qui suit, sur le click de la zone Div, je cherche à changer la classe c1 en c2.
Si je regarde l'inspecteur de code, cela fonctionne; mon div passe en classe c2, mais quand je redéclenche une deuxième fois le click pour repasser de c2 à c1, il me dit que je suis toujours en c1

Quelqu'un saurait il me dire comment appeler les événements pour qu'il prenne en compte les changements ?
actiproj

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
.c1 { background-color:red; }
.c2 { background-color:green; }
.test {
height:80px;
width:80px;
}
</style>
<body>
 
<div class="c1 test"></div>
 
<script>

Code :

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

1
2
3
4
5
6
7
8
9
10
$( ".c1" ).on( "click", function () {
	alert('c1');
        $(this).toggleClass("c1");
        $(this).toggleClass("c2");
});
$( ".c2" ).on( "click", function () {
	alert('c2');
        $(this).toggleClass("c1");
        $(this).toggleClass("c2");
});

Code :

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

1
2
3
</script>
</body>
</html>

**danielhagnoul** · 05/04/2014, 10h53

Code CSS :

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

1
2
3
4
5
6
7
8
.test {
    height: 80px;
    width: 80px;
    margin: 12px;
}
 
.c1 { background-color: red; }
.c2 { background-color: green; }

Code HTML :

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

<div class="c1 test"></div>

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
$( function(){
 
    // mettre l'événement sur un ID ou une classe invariable
    $( ".test" ).on( "click", function () {
        $( this )
            .toggleClass("c1")
            .toggleClass("c2");
 
        console.log( $( this ).attr( "class" ) ); // console, touche F12
    });
 
});

**actiproj** · 10/04/2014, 00h42

Merci mais ça ne répond pas à ma question, j'ai des traitements derrière donc j'ai besoin de changer la classe (et donc de voir apparaître mon alert('c2') )

Si ce n'est pas possible, j'aimerais comprendre pourquoi et pas simplement avoir un message qui me dit de faire autrement (sans remettre en cause le message dont je te remercie)

Appel d'évènement après un toggleClass

jQuery

Vue hybride

Discussions similaires

Partager

Partager