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 :
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 :
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 :
Et de ce fait dans mon code html, je faisais de même pour l'ID en mettant
Mais cela ne fonctionnait pas non plus
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
En vous remerciant d'avance de vos réponses.
BBCmh3
Modifié par bbcmh3 (23 Jun 2015 - 15:22)
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
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
En vous remerciant d'avance de vos réponses.
BBCmh3
Modifié par bbcmh3 (23 Jun 2015 - 15:22)