11492 sujets

JavaScript, DOM et API Web HTML5

Cacher / Montrer plusieurs div avec la même id.

Bonjour,

Tout d'abord, petite présentation, je m'appelle Baptiste, j'ai 14 ans.
Je suis sur le développement d'un site web en ce moment et je bloque sur un point, je vous explique la situation :

J'ai une BDD, dedans j'ai une table contenant les informations de chaque articles (news) de la page d'accueil de mon site. Grâce à une requête sql, je vais chercher ces informations dans cette table.

Ensuite, pour chaque entrée de ma table, j'inscris le code suivant dans ma table :


<div class="col-sm-6">	
	<div class="bouton_interactive_blue" id="HideArticle" style="width:100px height:50px;">Fermer</div>
	<div class="bouton_interactive_blue" id="ShowArticle" style="width:100px;height:50px;">Ouvrir</div>
	
       <div class="article" id="article">
	       <div class="article_top">
                       <a href="<?php echo $articleLien; ?>">
                                <img src="<?php echo $repertoire.$articleImg; ?>" alt="#" title="#" />
                       </a>
		</div>
									
		<div class="article_bottom">
			<div class="article_bottom_title">
				<a href="#">
					<div class="article_bottom_title_icon"></div>
				</a>
											
				<span class="article-text">
					<a href="#">
                                                 <span class="capitalize">
                                                       <?php echo $donnees['article_titre']; ?>
                                                  </span>
                                        </a>
				        <span class="article-publication">
						<span>
							<?php echo $donnees['article_type']; ?> -
						</span>
						<?php echo $donnees['article_date']; ?>                     	
					</span>
				</span>
			</div>
										
			<div class="article_bottom_description">
				<?php echo $donnees['article_description']; ?>
			</div>

		</div>
																
		<div class="article_bottom_fin">										
		</div>
	</div>
</div>


Pour le moment, ce code m'affiche 6 articles différents.
J'ai voulu par soucis de praticité que l'on puisse afficher / cacher chaque article grâce aux boutons que vous pouvez voir ci-dessus (avec l'id HideArticle / ShowArticle ).

Donc pour ceci, je mets le code suivant : 

	<script type="text/javascript">								
								
		$('#HideArticle').click(function()
		{
			$('#article').hide( 'slow')
		});	
									
		$('#ShowArticle').click(function()
		{
			$('#article').show( 'slow')
		});	

	</script>


Cependant, comme vous devez vous en douter, puisque chaque article généré aura la même id, c'est à dire : "article" et chaque bouton pour fermer / afficher auront les mêmes aussi, soit : "ShowArticle" - "HideArticle", et bien de ce fait, quand je clique sur ces boutons, il n'y a que le premier qui fonctionne.

C'est à ce niveau que j'ai besoin de vos conseils : Comment puis-je différencier chaque article pour qu'on puisse fermer / afficher chacun d'entre eux ?

J'ai essayé de faire ainsi :
Dans mon code javascript, je rajoutais une variable qui prenait la valeur de l'ID de l'article dans la table. C'est à dire :

 var i = '<?php echo $donnees['ID']; ?>';

	$('#HideArticle'+i).click(function()
	{
		$('#article'+i).hide( 'slow')
	});	
									
	$('#ShowArticle'+i).click(function()
	{
		$('#article'+i).show( 'slow')
	});

Et de ce fait dans mon code html, je faisais de même pour l'ID en mettant 
id="HideArticle[#darkred]<?php echo $donnees['ID']; ?>[/#]"
et etc....partout.

Mais cela ne fonctionnait pas non plus Smiley ohwell

Je précise que je suis tout jeune dans ce domaine.

Si vous avez la possibilité de m'aider, je vous en serai très reconnaissant Smiley smile

En vous remerciant d'avance de vos réponses.

BBCmh3
Modifié par bbcmh3 (23 Jun 2015 - 15:22)
Il est interdit d’avoir deux fois le même IDs sur la même page.

Utilise des classes plutôt que des IDs : ton code sera valide et ton jQuery n’aura plus de souci (en remplaçant les "." par des "#", comme en CSS : tu utiliseras $('.HideArticle') au lieu de $(#HideArticle') et le tour est joué).
Merci ! Ca fonctionne sauf que tout s'ouvre / se ferme en même temps.
Entre temps, j'ai essayé de faire d'une autre manière :

Dans mon html :

<div class="bouton_interactive_blue showDiv" style="disaply:inline-block;width:100px;height:50px;">Ouvrir</div>
<div class="bouton_interactive_blue hideDiv" style="display:inline-block;width:100px;height:50px;">Fermer</div>
<div class="article">
...
...
</div>


Et dans mon JS :

         <script type="text/javascript">
		$('.showDiv').click(function () {
		        $(this).next().next().show();
		});
		$('.hideDiv').click(function () {
			$(this).next().hide();
		});	
	</script>


Cela fonctionne sauf que cette fois-ci j'aimerai arriver à faire qu'un seul puisse être visible à la fois :
C'est à dire par exemple qu'ils soient tous fermés à l'ouverture de la page (ou alors un seul d'ouvert), et ensuite quand je clique sur le bouton Ouvrir d'un autre article, celui-ci s'ouvre et le premier se ferme.
Modifié par bbcmh3 (23 Jun 2015 - 15:21)
Administrateur
Bonjour et bienvenue, Smiley smile

$(this) était bien la démarche à adopter. Maintenant que tu arrives à ouvrir celui qui t'intéresse et pas un autre, le plus simple pour n'en avoir qu'un d'ouvert à la fois est de :
1/ tous les refermer. Peu importe qu'il y en ait 0, 1 ou 6 d'ouverts, cette info ne t'intéresse pas. Quelque chose comme $('.le-truc-a-gerer').hide()
2/ agir sur celui qui t'intéresse, via $(this) donc.

En avoir 1 seul d'ouvert au démarrage (ou 1 maximum), là ça dépend de ce qu'envoie le serveur. L'utilisateur n'a encore rien fait ni eu l'occasion de le faire.

Astuces :
Si tes blocs ont soit hideDiv soit showDiv comme classe, il va te falloir chercher l'un ou l'autre ou les 2 selon les cas... pfiou ça complique le code.
Je te conseille de faire plus simple avec un "marqueur" comme une classe .toggleArticle ou .toggleNews
- toggle pour indiquer que ça a 2 états (on off ou ouvert fermé, peu importe). .cmdSomething ou .btnSomething pour le bouton d'action qui déclenche l'action
- Article pour décrire ce sur quoi ça agit. Que ce soit un élément HTML div ou ul ou section ou article ou p ou span, ça changera demain ou d'une page à l'autre... Ne pas s'y fier : mieux vaut décrire la fonction de tes scripts que ce sur quoi ça s'applique. Smiley cligne

Et ensuite une classe pour décrire l'état : .is-opened par exemple ou .toggleNewsOpened (au participe passé, parce que "Open" ça te dit pas si ça doit s'ouvrir ou si c'est déjà ouvert...)
Choisis le français ou l'anglais pour la nomenclature. Si tu mélanges les 2, tu n'es jamais sûr du nommage. Avec une seule langue, à la limite tu peux deviner le nom de la classe sans même regarder l'autre page (HTML si tu écris du JS, JS si tu rajoutes les classes dans le HTML)
Merci de tout ses conseils !

J'applique cela dés ce soir !
Modifié par bbcmh3 (23 Jun 2015 - 17:40)
Sujet clos
Aller à