Toogle et modification dynamique de lien innerHTML
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, je me suis inspiré d'un tuto trouvé sur le net. 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 :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <!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".
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <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
}
// Si un autre déroulant que celui visé est ouvert, il se refermera
else {
$(".deroulant").slideUp("slow");
$(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! :)
