11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour !

Je cherche, avec un seul bouton, à déclencher plusieurs événements les uns après les autres, je m'explique :

Dans le cas présent, j'ai un texte d'affiché. Au clic, le texte disparaît et est remplacé en fondu par un autre. Mais lorsque j'essaye, via une variable au contenu numérique, de modifier l'événement du bouton pour faire apparaître un autre texte, surprise ! ça ne marche pas. Après moult bricolage et recherche sans succès, je suis tombé sur un forum sur ce site qui avait un problème similaire, mais impossible d'appliquer la solution à mon problème.

Dans l'état actuel des choses, j'ai ceci :

$(document).ready(function() {
	$(".part1").css("display","none");
	$(".part1").slideUp(300).delay(800).fadeIn(500);
	
	var I = 0;
	
	$("button").on("click", suite1);
	
	function suite1(){
		$(".part1").css("display", "none");
		$(".part2").slideUp(300).delay(800).fadeIn(400);
	}
	
	I = I + 1;
	
	if (I == 1){
		$("button").on("click", suite2);
		I = I + 1;
	}
	
	function suite2(){
		$(".part2").css("display", "none");
		$(".part3").slideUp(300).delay(800).fadeIn(400);
	}
	
	if (I == 2){
		$("button").on("click", suite3);
		I = I + 1;
	}
	
	function suite3(){
		$(".part3").css("display", "none");
		$(".part4").slideUp(300).delay(800).fadeIn(400);
	}
});


Ce que je cherche à faire :
Clic 1 -> afficher partie 2
Clic 2 -> afficher partie 3
Clic 3 -> afficher partie 4
Clic 4 -> link à une autre page web (pas encore tapé dans l'exemple)

Si quelqu'un pourrait m'aider assez rapidement cela m'arrangerait, je manque cruellement de temps (projet de fin d'année, tout ça tout ça). Je m'excuse si mon problème vous semble simple, je reste malgré tout un débutant avec seulement quelques mois de code "scolaire" derrière lui Smiley sweatdrop Merci d'avance !
Bonjour Canard_en_plastique,

Si je me trompes pas :

function suite(){
  if (I == 0){
    $(".part1").css("display", "none");
    $(".part2").slideUp(300).delay(800).fadeIn(400);
  }else if(I == 1){
    $(".part2").css("display", "none");
    $(".part3").slideUp(300).delay(800).fadeIn(400);
  }else if(I == 2){
    $(".part3").css("display", "none");
    $(".part4").slideUp(300).delay(800).fadeIn(400);
  }
  I++;
}
//ou 
function suite(){
  if (I >=0 && I <=2){
    $(".part"+(I+1)).css("display", "none");
    $(".part"+(I+2)).slideUp(300).delay(800).fadeIn(400);
    I++;
  }  
}

$(document).ready(function() {
  $(".part1").css("display","none");
  $(".part1").slideUp(300).delay(800).fadeIn(500); 
  var I = 0;
  $("button").on("click", suite); 
});

Modifié par aliasdmc (26 Mar 2019 - 20:30)
Meilleure solution
Bonsoir aliasdmc

Merci beaucoup, ça marche parfaitement ! Je n'avais pas pensé à tout mettre dans une seule fonction, c'est beaucoup plus simple et aussi bien moins lourd ^^