11548 sujets

JavaScript, DOM et API Web HTML5

[Resolu] Bidouillage en jQuery : enchainer 2 actions

Bonjour,

Je débute en jQuery et donc pour essayer d'y comprendre quelque chose, j'ai décider d'appliquer des petits trucs sur une page (et en passant, un peu de CSS3).

L'idée est d'avoir 3 paragraphes qui sont "ouvrables" : on clique sur un bouton, et la suite apparaît, le bouton s'en va et un autre qui les referme apparaît à la fin.

Sauf que mes actions sont saccadée et que je comprend pas comment enchainer les actions (j'ai bien une idée sur le fait que ce soit un callback, mais j'arrive pas à le faire fonctionner u_u)

Bref voici mon HTML et mon CSS pour que vous poussiez y jettez un oeil et m'expliquer ce que je fais pas bien (et je sais, mes sélecteurs sont moches...) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script>
 $(document).ready(function(){
	$("span.1, span.2, span.3").hide();
	$("bouton.less3").hide();
	$("a.bouton.1").click(function(){
   		$("span.1").slideDown();
   		$("a.bouton.1").hide();
   		});
   	$("a.bouton.2").click(function(){
   		$("span.2").slideDown();
   		$("a.bouton.2").hide();
   		});
   	$("a.bouton.3").click(function(){
   		$("span.3").slideDown();
   		$("a.bouton.3").hide();
   		});
   	$("span a.bouton.less1").click(function(){
   		$("span.1").slideUp();
   		$("a.bouton.1").show();
   		});
   	$("span a.bouton.less2").click(function(){
   		$("span.2").slideUp();
   		$("a.bouton.2").show();
   		});
   	$("span a.bouton.less3").click(function(){
   		$("span.3").slideUp();
   		$("a.bouton.3").show();
   		});
 });
</script>
</head>

<body>

<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br/><a href="#" class="bouton 1 vert">More...</a>
<span class="1">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><a href="#" class="bouton less1 vert">Less!</a></span></p>

<p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br/><a href="#" class="bouton 2 violet">More...</a>
<span class="2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><a href="#" class="bouton less2">Less!</a></span></p>

<p class="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br/><a href="#" class="bouton 3 orange">More...</a>
<span class="3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><a href="#" class="bouton less3">Less!</a></span></p>

</body>
</html>



body {
	font-size: 14px;
	font-family: Helvetica, Verdana, Arial, sans-serif;
}

p.p1 {
	padding: 10px;
	background-color: #e5ffbb;
	margin-left: 30px;
	float: left;
	line-height: 30px;
	text-align: justify;
	width: 300px;
	margin-bottom: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

p.p2 {
	padding: 10px;
	background-color: #cc66ff;
	margin-left: 30px;
	float: left;
	line-height: 30px;
	text-align: justify;
	width: 300px;
	margin-bottom: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

p.p3 {
	padding: 10px;
	background-color: #ffcc66;
	margin-left: 30px;
	float: left;
	line-height: 30px;
	text-align: justify;
	width: 300px;
	margin-bottom: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}


span {
}

a.bouton {
	padding: 8px;
	font-weight: bold;
}

.vert { 	
	color: #ccff66;
	text-decoration: none;
	text-shadow:0 1px 1px rgba(0,0,0,.3); 
	background-color: #00BF3C;
	background: -webkit-gradient(linear, left top, left bottom, from(#00BF3C), to(#007F28));
	background: -moz-linear-gradient(top, #00BF3C, #007F28);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.vert:hover {
	color: #a3cb53; 
	background-color: #007f28;
	background: -webkit-gradient(linear, left top, left bottom, from(#007F28), to(#004014));
	background: -moz-linear-gradient(top, #007F28, #004014);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}


Merci d'avance pour vos explications Smiley smile
Modifié par Redink (24 Jun 2010 - 15:04)
Administrateur
Attention il n'est pas recommandé d'utiliser des noms de classe uniquement numériques (1, 2, 3) il vaut mieux ajouter des caractères alpha.

Avec simplification et callbacks :

 $(document).ready(function(){ 
    $(".hopla").css("display","block").hide();
    $("bouton.less").hide(); 
    $("a.bouton.more").click(function(){ 
		$(this).hide();
		$(this).next(".hopla").slideDown(); 
    }); 
	$("a.bouton.less").click(function() {
		$(this).closest(".hopla").slideUp("normal", function() {
			$(this).closest("p").find("a.more").show();
		});
	});

 }); 


<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
<br/><a href="#" class="bouton more vert">More...</a> 
<span class="hopla">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
<br /><a href="#" class="bouton less vert">Less!</a></span></p> 
 
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
<br/><a href="#" class="bouton more violet">More...</a> 
<span class="hopla">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
<br /><a href="#" class="bouton less">Less!</a></span></p> 
 
<p class="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
<br/><a href="#" class="bouton more orange">More...</a> 
<span class="hopla">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
<br /><a href="#" class="bouton less">Less!</a></span></p>

Modifié par dew (24 Jun 2010 - 14:14)
Je test ça immédiatement Smiley smile

Merci beaucoup

(oui je sais c'est mal les classes numériques mais là c'est juste du bricolage en local, donc pas destiné à la publication web ^^ - du moins pour le moment!)


Edit : Magnifique Dew! En plus comme ça j'ai compris quelque chose en jQuery Smiley smile
Modifié par Redink (24 Jun 2010 - 14:39)
Sujet clos
Aller à