jquery / Jquery UI : Faire apparaître une div et modifier une image puis faire l

Question

Bonjour à tous,

Voilà ce que j'aimerai faire : 

J'aimerai réaliser une page avec des titres, puis en dessous une petite image "+" qui lorsqu'on clique dessus, déroule une div contenant une image avec des explications. Lorsqu'on clique sur ce "+", ce dernier ce change en "-" et lorsqu'on clique dessus, via un effet inverse la div contenant les explications disparaît.

Pour les effets, j'ai opté pour le blind de jquery UI.

Voici mon code : 

$(document).ready(function()
{
$(".expla").hide();


$(".grinder img").click(function () {
if($('.grinder').hasClass('plus'))
{
$('.grinder img').replaceWith('');
$(".expla.egrinder").show("blind", 5000);

}
else	
{
$('.grinder img').replaceWith('');
$(".expla.egrinder").hide("blind", 5000);
}
$('.grinder').toggleClass("plus");


    });
})

Alors voici mon problème : j'arrive à dérouler la div selon l'effet escompté, j'arrive à changer l'image, mais l'effet inverse au second click sur l'image changée (devenu un "-") ne se produit pas, en gros il y a une couille dans le potage ^^

Est-ce que quelqu'un a une idée ?

dvwyns · Answer

Salut, 

A mon avis,c'est pcq tu changes l'image sur lequel tu as mis un évenement (click), du coup, l'évènement est perdu.
Essais ça :
$(".grinder img").on("click",function () {
if($('.grinder').hasClass('plus'))
{
$('.grinder img').replaceWith('');
$(".expla.egrinder").show("blind", 5000);

}
else	
{
$('.grinder img').replaceWith('');
$(".expla.egrinder").hide("blind", 5000);
}
$('.grinder').toggleClass("plus");


    });

La méthode .on() permet d'attacher un évenement à un contenu dynamique (tu remplaces le "img" par un autre).

Enjoy

Jquery / Jquery UI : Faire apparaître une div et modifier une image puis faire l

1 réponse

Votre réponse

Discussions similaires