Hover sur div

Par passealasuite, il y a 11 ans

Javascript

Bonjour à tous,

Etant totalement novice en Javascript, je fais face à une difficulté depuis un petit moment.

J'ai plusieurs blocs (articles), avec à l'intérieur deux class, une visible, l'autre non. Je voudrais lorsque je clique sur une class fair apparaître l'autre mais seulement pour le bloc article en question et non pour l'ensemble des blocs.

<article> <div class="bloc_visible"></div> <div class="bloc_a_afficher" style="display:none;"></div> </article> <article> <div class="bloc_visible"></div> <div class="bloc_a_afficher" style="display:none;"></div> </article> <article> <div class="bloc_visible"></div> <div class="bloc_a_afficher" style="display:none;"></div> </article>

Avec la fonction Javascript suivante, lorsque je clique sur la class "bloc_visible" dans l'un des blocs article, toutes les class "bloc_a_afficher" apparaissent, or je souhaite afficher cette class uniquement dans le bloc article en question.

$( ".bloc_visible" ).click(function() { $( ".bloc_a_afficher" ).toggle(0); });

Pourriez-vous m'éclairer sur le sujet.

Par avance merci.

5 réponses

SimonAndGarfunkel, il y a 11 ans

Salut passealasuite,

voici une solution possible à ton problème : lien jsfiddle

passealasuite, il y a 11 ans

Salut SimonAndGarfunkel,

Merci pour ta réponse, c'est exactement ce que je voulais faire.
Même si je pense avoir compris le principe, pourrais-tu m'expliquer ta fonction Javascript (pour comprendre le code) ?

Encore merci !

passealasuite, il y a 11 ans

J'ai trouvé ce que je cherchais sur ta fonction.
Pour ceux qui ne comprendraient pas la fonction parent()

SimonAndGarfunkel, il y a 11 ans

Explication :

$( ".bloc_visible" ).click(function() { $(this).parent().find('.bloc_a_afficher').toggle(0); });

$(this) : je récupère l'élément sur lequel le click s'est produit (soit une div.bloc-visible)
parent() : me donne son parent direct (soit article)
find('.bloc_a_afficher') : dans cet article, je recherche l'élément ayant la class .bloc_a_afficher

Voilou !

passealasuite, il y a 11 ans

Parfait !
Merci beaucoup pour ton aide !