Mise à jour d'id jQuery

Version imprimable

Bonjour,

J'ai un Jquery qui change d'id et le src d'une image.
Au premier clique : image de pause, au second image de play. Le tout pour faire un audio player.

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
$("#img_play").click(function() {  
              audio.play();
              $(this).attr('src','pause.png'); 
              $(this).attr('id', 'img_pause');  
            });  
            $('#img_pause').click(function() {  
              audio.pause(); 
              $(this).src('src','play.png'); 
              $(this).attr('id', 'img_play');  
            });

Et le html correspondant:

Code:

1
2
3
4
5
6
7
 
<div id="audio_player">
<div id="play_pause"><img id="img_play" src=Play.png width="33" height="38" alt=""/></div>
<div id="compteur_sec"></div>
<div id="avance_recul"><img id="img_avance_recul" src="Avance_Recul.png" width="138" height="30" alt=""/></div>
<progress id="barre_progress" value="75" min="0" max="100"></progress>
</div>

Le second clique n'a aucun effet.

Avez vous une idée de la cause du probleme?

Merci

Bonsoir

Pourquoi changer l'ID ?
Code:

1 2 3 <div id="play_pause"> <img id="img_action" src="play.png" width="33" height="38" alt=""/> </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 $( "#img_action" ).on( "click", function(){ var jObj = $( this ); if ( jObj.attr( "src" ) === "play.png" ){ audio.play(); jObj.attr( "src", "pause.png" ); } else { audio.pause(); jObj.attr( "src", "play.png" ); } });
Citation:

Le second clique n'a aucun effet.

Avez vous une idée de la cause du probleme?

Avec le changement d'ID vous devez manipuler un code dynamique :fleche: Différences entre on() avec 1 ou 2 sélecteurs

13/08/2014, 12h26
setni

Merci beaucoup, ce code fonctionne très bien :) et répond au problème