Discussion :

[moiju]

Bonjour,
j'ai un problème pour afficher un petit code en jquery.
La première partie fonctionne mais pas la fin.
Il change bien la classe mais ne la prends pas en compte lors du click.
Je sèche, avec vous une idée ? j'ai zappé un truc?

Pour l'instant il ne prend pas en compte le changement de classe ( bien que la div 'click.off' n'existe plus lors du deuxième click...
Merci !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){
    $('#click.off').click(function(){
        $('img').animate({
            width: '900px'
        }, 500, 
        function(){
            $('#click.off').removeClass().addClass("on");
 
        });
    });
    $('#click.on').click(function(){
        $('img').animate({
            width: '450px'
        },
        function(){
            $('#click.on').removeClass().addClass("off");
 
        });
 
 
    }); 
 
});

[danielhagnoul]

Bonsoir

Exemple :

Code css :

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

#divID { width: 100px; height: 100px; border: 1px solid red; background-color: lightgrey; }

Code html :

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

1
2
3
<div id="divID"></div>
 
<img src="http://danielhagnoul.developpez.com/images/imageTest.png">

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$( function(){
 
	/*
	 * Si la division d'ID "divID" ne possède pas
	 * la classe "tropLarge" on agrandit la largeur
	 * de l'image de 450 px. Dans le cas inverse, on
	 * réduit la largeur de 450 px.
	 * 
	 * On termine en ajoutant ou en retirant la classe
	 *  "tropLarge" à la division 
	 * (http://api.jquery.com/toggleClass/).
	 */
 
    $( "#divID" ).on( "click", function(){
    	var jObj = $( this );
 
    	if ( ! jObj.hasClass( "tropLarge" ) ){
        	$( 'img' ).animate({ "width" : "+=450px" }, 3000 );
    	} else {
        	$( 'img' ).animate({ "width" : "-=450px" }, 3000 );
    	}
 
    	jObj.toggleClass( "tropLarge" );
    });
 
});

[Bovino]

Pour l'instant il ne prend pas en compte le changement de classe

Non, ce n'est pas tout à fait ça...

Quand tu écris

Code :

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

$('#click.off').on("click", function(){...});

jQuery affecte à tous les éléments du document ayant la classe "off" l'action liée à l'événement.
Mais quand tu modifies la classe, les éléments recevant cette classe n'ont pas été "initialisés" donc le clic ne les concerne pas !
Il faut soit utiliser les événements délégués, soit gérer tous les éléments dans un même événement dans lequel tu différencieras ceux ayant la classe on de ceux ayant off.

En tout état de cause, lorsque tu affectes un événement, seuls les éléments présents dans le DOM au moment de l'affectation sont concernés.

[SpaceFrog]

Code :

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

$('#click.off')

jQuery affecte à tous les éléments du document ayant la classe "off" l'action liée à l'événement.

Pas tout à fait Bovino, l'élément unique ayant pour id click et pour class .off

[Bovino]

Oui, au temps pour moi :

jQuery affecte à l'élément du document ayant l'id click et la classe "off" l'action liée à l'événement.

[moiju]

Merci beaucoup, avec ce code ça fonctionne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function(){
    $( function(){
 
 
 
        $( '.divID img' ).on( "click", function(){
            var jObj = $( this );
 
            if ( ! jObj.hasClass( "on" ) ){
                $( this ).animate({
                    "width" : "+=450px", 
                    "height" : "+=450px"
                }, 500 );
            } else {
                $( this ).animate({
                    "width" : "-=450px", 
                    "height" : "-=450px"
                }, 500 );
            }
 
            jObj.toggleClass( "on" );
        });
 
    });
});

Mais maintenant j'aimerais que sur certaines div (à définir) l'effet animate s’effectue de droite a gauche ( c'est de gauche à droite par défaut ),
je cherche mais ne trouve pas ... est ce possible ??
Merci!