Comment isolé un un événement clique pour chaque item?
lakamark
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.
4 réponses
EDIT :
// Display article content
var $article = $('[data-js="article___item"]');
$article.on('click', '[data-js="show-article-details"]', function (e) {
e.preventDefault();
var $parent = $(this).parents('.article___item');
$('.article__body', $parent).addClass('article-content-display');
});
// display
$article.on('click', '[data-js="article-cache"]', function (e) {
e.preventDefault();
$('.article__body').removeClass('article-content-display');
});Salut,
Jamais au grand JAMAIS on ne met le même ID sur plusieurs éléments (c'est le B-A BA ^^) !
L'erreur vient de là je pense ;)
HTML :
<div id="app">
<!-- article 1 -->
<article class="article___item" data-js="article-item">
<div class="article__pusher">
<div class="article__background">
<div class="article__header">
....
</div>
<div class="article__controls">
<button class="article-btn-show" data-js="show-article-details" title="Afficher les détail de l'article">+</button>
</div>
<!-- Aficher ce contenu -->
<div class="article__body">
contenu de l'article ici.
</div>
</div>
<div class="article__cache" data-js="article-cache"></div>
</div>
<div class="clearfix"></div>
</article>
<!-- article 2 -->
<article class="article___item" data-js="article-item">
<div class="article__pusher">
<div class="article__background">
<div class="article__header">
....
</div>
<div class="article__controls">
<button class="article-btn-show" data-js="show-article-details" title="Afficher les détail de l'article">+</button>
</div>
<!-- Aficher ce contenu -->
<div class="article__body">
contenu de l'article ici.
</div>
</div>
<div class="article__cache" data-js="article__cache"></div>
</div>
<div class="clearfix"></div>
</article>
</div>JS
// Display article content
var $article = $('[data-js="article___item"]');
$article.on('click', '[data-js="show-article-details"]', function (e) {
e.preventDefault();
var $parent = $(this).parents('.article___item');
$parent.toggleClass('article-content-display');
});
// display
$article.on('click', '[data-js="article-cache"]', function (e) {
e.preventDefault();
$('.article-content-display').removeClass('article-content-display');
});