11540 sujets

JavaScript, DOM et API Web HTML5

Switch d'éléments play/pause par un clic avec jQuery

Bonjour à tous,

Je suis en train d'élaborer un slider avec le plugin Cycle de jQuery. Un exemplaire de test est ici.

Avec une bonne map de css et la création des éléments de contrôle en javascript je suis assez satisfais du résultat obtenu...

Mais je voudrais encore améliorer mon script en switchant les éléments play/pause avec un clic de souris, et vise versa à chaque clic (pour l'instant les 2 boutons sont placés côte à côte).

Voici mon code :
//switch des éléments play/pause
$('#navSliderPause').click(function(){$('<li id="navSliderResume"></li>').replaceAll('#navSliderPause');});
$('#navSliderResume').click(function(){$('<li id="navSliderPause"></li>').replaceAll('#navSliderResume');});

Le problème c'est que je n'arrive pas à répéter l'opération après le premier clic de souris. Pire : ce code invalide ensuite les commandes jQuery associées aux boutons (mais je le laisse pour vous montrer). Il doit y avoir un "return false" ou quelque chose à mettre en variable quelque part... mais je sèche... Smiley ohwell

Merci pour votre intervention éventuelle.
Modifié par Olivier C (01 Sep 2012 - 12:19)
Salut, en remplaçant ton bouton, tu retire en même temps les évènements (click) y étant attaché. Pour que ton code fonctionne, la solution simple aurait été d'utiliser la délégation d'évènements (avec la fonction jquery .on()). Cependant, tu n'as pas codé le plugin, et donc je doute que tu veuille le modifier.

Alors, je te proposerais d'utiliser un bouton tierce que tu créeras toi même pour déclencher des clicks sur les deux boutons ajoutés par le plugin. Si tu n'as pas besoin d'autant de bouton, n'hésite pas à cacher les boutons play/resume du plugin (display: none par exemple). Cela pourrait te donner:


$('.mon-bouton').click(function() {

	if( playing ) { // Tu devras définir la variable playing et lui donner une valeur selon l'état du slider
		
		$('#navSliderResume').trigger('click');
		
	} else {
		
		$('#navSliderPause').trigger('click');
		
	}
	
});
Salut,

Y a toujours moyen d'enlever les nœuds du document sans les supprimer pour les remettre ensuite.
$navSliderPause = $("#navSliderPause");
$navSliderResume = $("#navSliderResume");

$navSliderPause.click(function(){
	$navSliderPause.after($navSliderResume);
	$navSliderPause.detach();
});
$navSliderResume.click(function(){
	$navSliderResume.after($navSliderPause);
	$navSliderResume.detach();
});

$navSliderPause.detach();


Mais une solution plus simple existe, un seul élément où l'id (ou classe) change.
$("#navSliderResume").toggle(function(){
	this.id = "navSliderPause";
}, function(){
	this.id= "navSliderResume";
});
Merci bien à tous 2 pour vos suggestions. Quand je serais arrivé à lier l'une de vos solutions avec les fonctions respectivement allouées aux boutons, je vous tiendrais au courant ici même.
Sujet clos
Aller à