Bonsoir,
Je suis tout débutante en javascript et j'ai donc beaucoup de lacunes et pas forcément de bons raisonnements, j'aurais donc besoin d'un petit coup de pouce.
Voici le soucis que je rencontre : J'ai une page qui comporte un petit jquery SlideUp/SlideDown. S'agissant d'une newsletter, ce script permet de dérouler un paragraphe caché d'un article lorsque l'on clique sur le lien "lire" correspondant, puis de le cacher de nouveau en recliquant, et le cas échéant lorsque l'on déroule un autre article, celui qui était déjà déroulé se referme également.
Voici la portion de code correspondante :
J'aimerai maintenant modifier dynamiquement le lien qui déclenche l’événement click pour que son texte se transforme en "Fermer" lorsque le paragraphe est déroulé. J'ai réussi à obtenir de bons résultats avec le code ci-dessous, mais voici enfin mon problème : si l'on clique sur le lien qui s'appelle désormais "Fermer", il redevient "Lire", par contre si je le laisse ouvert et que je déroule un autre article, le premier article se referme mais son lien reste "Fermer".
Sauriez-vous m'indiquer ce qui cloche dans mon script, s'il vous plait? (Désolée d'avoir été longue, je voulais m'assurer d'être bien précise). Merci par avance!
Modifié par puta2000 (04 Sep 2013 - 18:29)
Je suis tout débutante en javascript et j'ai donc beaucoup de lacunes et pas forcément de bons raisonnements, j'aurais donc besoin d'un petit coup de pouce.
Voici le soucis que je rencontre : J'ai une page qui comporte un petit jquery SlideUp/SlideDown. S'agissant d'une newsletter, ce script permet de dérouler un paragraphe caché d'un article lorsque l'on clique sur le lien "lire" correspondant, puis de le cacher de nouveau en recliquant, et le cas échéant lorsque l'on déroule un autre article, celui qui était déjà déroulé se referme également.
Voici la portion de code correspondante :
<!doctype html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<article>
<p>Partie du texte qui reste visible</p>
<p class="deroulant">Partie du texte qui est cachée et qui se déroule avec l'événement click sur le lien en dessous</p>
<a class="lire" href="" alt="">Lire</a>
</article>
<article>
<p>Partie du texte qui reste visible</p>
<p class="deroulant">Partie du texte qui est cachée et qui se déroule avec l'événement click sur le lien en dessous</p>
<a class="lire" href="" alt="">Lire</a>
</article>
<!-- Et d'autres articles, etc... -->
<script type="text/javascript">
$(document).ready( function () {
$(".deroulant").hide();
$("a.lire").click( function () {
// Si le déroulant visé est ouvert, le lien refermera celui-ci
if ($(this).prev(".deroulant:visible").length != 0) {
$(this).prev(".deroulant").slideUp("slow");
}
// Si un autre déroulant que celui visé est ouvert, il se refermera
else {
$(".deroulant").slideUp("slow");
$(this).prev(".deroulant").slideDown("slow");
}
return false;
});
} ) ;
</script>
</body>
</html>
J'aimerai maintenant modifier dynamiquement le lien qui déclenche l’événement click pour que son texte se transforme en "Fermer" lorsque le paragraphe est déroulé. J'ai réussi à obtenir de bons résultats avec le code ci-dessous, mais voici enfin mon problème : si l'on clique sur le lien qui s'appelle désormais "Fermer", il redevient "Lire", par contre si je le laisse ouvert et que je déroule un autre article, le premier article se referme mais son lien reste "Fermer".
<script type="text/javascript">
$(document).ready( function () {
$(".deroulant").hide();
$("a.lire").click( function () {
// Si le déroulant visé est ouvert, le lien refermera celui-ci
if ($(this).prev(".deroulant:visible").length != 0) {
$(this).prev(".deroulant").slideUp("slow");
this.innerHTML = 'Lire';// Ca, pas de soucis, ça fonctionne
}
else {
$(".deroulant").slideUp("slow"); // Si un autre déroulant que celui visé est ouvert, il se refermera
$(this).prev(".deroulant").slideDown("slow");
$("a.lire").innerHTML = 'Lire'; // Ca par contre ça marche pas et c'est ça qui me pose problème!!
this.innerHTML = 'Fermer';// Ca aussi ça fonctionne
}
return false;
});
} ) ;
</script>
Sauriez-vous m'indiquer ce qui cloche dans mon script, s'il vous plait? (Désolée d'avoir été longue, je voulais m'assurer d'être bien précise). Merci par avance!
Modifié par puta2000 (04 Sep 2013 - 18:29)