Discussion :

[Pecose]

Je veux modifié dynamiquement l'action d'un bouton:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#action1").click(function(){
$('.bouton').attr('id', 'action2');
//action specifique à l'action1			
});
 
$("#action2").click(function(){
$('.bouton').attr('id', 'action3');
//action specifique à l'action2				
});
 
$("#action3").click(function(){
$('.bouton').attr('id', 'action1');
//action specifique à l'action3				
});

Le bouton en question:

Code :

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

<input type="button" value="Valider" class="bouton" id="action1"/>

Je ne pence pas pouvoir utiliser de Toggle vu que j'ai plus de deux actions différentes sur le même bouton.

Le problème de ce code, c'est qu'a partir du deuxième bouton ca ne marche plus. Je pence que l'action2 n'est pas reconnu, n'existant pas dans le code d'origine...

Si vous avez une solution c'est avec plaisir.

[danielhagnoul]

Code :

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

<input class="myBtn" type="button" data-action="action1" value="Valider">

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
26
27
28
29
30
31
$( "input.myBtn" ).on( "click", function(){
 
	switch( $( this ).data( "action" ) ){
		case "action1" : 
			$( this ).data( "action", "action2" )
 
			// code action 1
 
			// debug
			console.log( "cas1" );
			break;
		case "action2" : 
			$( this ).data( "action", "action3" )
 
			// code action 2
 
			// debug
			console.log( "cas2" );
			break;
		case "action3" : 
			$( this ).data( "action", "action1" )
 
			// code action 3
 
			// debug
			console.log( "cas3" );
			break;
		default :
			$.error( "Ce cas ne doit jamais se produire !" );
	}
});

[Pecose]

Sachant que je suis sur Chrome, j'ai du faire quelques petites modifications sur le code jQuery pour que ca marche chez moi:

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
 
$(".myBtn").click(function(){
	switch( $(this).data("action") ){
		case "action1" : 
			$(this).data("action", "action2");
                        // code action 1
			// debug
			console.log( "cas1" );
			break;
		case "action2" : 
			$(this).data("action", "action3");
	                // code action 2
	                // debug
			console.log( "cas2" );
			break;
		case "action3" : 
			$(this).data("action", "action1");
	                // code action 3
	                // debug
		        console.log( "cas3" );
			break;
		default :
			$.error( "Ce cas ne doit jamais se produire !" );
	}
});