Bonjour,
Voila je rencontre un petit problème avec mon code.
Ce que je fais
J'ai une liste d'aticle avec un bouton qui permet d'afficher le contenu de l'artiste. Voici le code html du module d'article : (version aléger)
<div id="app">
<!-- article 1 -->
<article class="article___item" id="article-item">
<div class="article__pusher">
<div class="article__background">
<div class="article__header">
....
</div>
<div class="article__controls">
<button class="article-btn-show" id="show-article-details" title="Afficher les détail de l'article">+</button>
</div>
<!-- Aficher ce contenu -->
<div class="article__body" id="article-body">
contenu de l'article ici.
</div>
</div>
<div class="article__cache" id="article-cache"></div>
</div>
<div class="clearfix"></div>
</article>
<!-- article 2 -->
<article class="article___item" id="article-item">
<div class="article__pusher">
<div class="article__background">
<div class="article__header">
....
</div>
<div class="article__controls">
<button class="article-btn-show" id="show-article-details" title="Afficher les détail de l'article">+</button>
</div>
<!-- Aficher ce contenu -->
<div class="article__body" id="article-body">
contenu de l'article ici.
</div>
</div>
<div class="article__cache" id="article-cache"></div>
</div>
<div class="clearfix"></div>
</article>
</div>
Ce que je veux
Quand l'utilisateur clique sur le bouton qui a l'id #show-article-details ça ajoute la class .article-content-display qui son des animation css. Il faut que seulement une div à cette classe. Je veux un éveénment "click" isolé par item.
Ce que j'obtiens
Ce que j'obtient est que c'est seulement la première div qui a l'id #article-item que l'événement clique est lancer. Quand je clique sur la deuxième div il n'y a rien qui se passe.
Voici mon code js :
// Display article content
var $app = $('#app');
$app.on('click','#show-article-details',function(event){
event.preventDefault();
var $this = $(this);
var $parent = $this.parent().parent().parent().parent();
$parent.toggleClass('article-content-display');
});
// display
$app.on('click','#article-cache',function(event){
event.preventDefault();
var $this = $(this);
var $article_selected = $('#article-item').first();
$('#article-item').removeClass('article-content-display');
});
Merci de votre aide en avance.