Discussion :

[Valerie6377]

Bonjour,

Je suis nouvelle sur developpez.net, c'est donc ma première demande. J'espère que je suis au bon endroit, c'est un peu difficile de s'y retrouver.
Depuis pas mal de temps je tâtonne avec mon script javascript. J'ai des résumés de livres (issus d'une BDD) et chaque résumé doit s'afficher ou disparaître au clic sur son lien Voir le résumé/Cacher le résumé.
Je souhaite :

- Voir/Cacher une div en cliquant sur son lien
- Voir/Cacher une autre div en cliquant sur son lien et la div précédemment ouverte se ferme.
Ces deux points fonctionnent.

- Pouvoir aussi refermer la div qui est ouverte en recliquant sur son lien.
C'est ce dernier point qui pose problème. Quand je clique sur "Cacher le résumé", rien ne se passe.
Et pour cause, je ne sais pas ce qui manque à mon script.

J'ai mis mes codes dans jsfiddle : https://jsfiddle.net/Valerie6377/pLzyahn7/5/
J'espère que quelqu'un pourra m'aider et trouver ce qui ne va pas. :-)

Valérie

[Toufik83]

Bonjour,

Supprimes le code jQuery en bas de page, et modifies l'attribut onclick comme ça onclick="ouvrirFermerSpoiler.call(this);" afin de profiter de l'usage du mot clé this (qui pointe sur le <div class="spoilerDiv">....</div> cliqué) à l'intérieur de la fonction.

Après la fonction pourrait se résumer à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function ouvrirFermerSpoiler() {
  let spoilers = document.getElementsByClassName('contenuSpoiler');
 
  for (let i = 0; i < spoilers.length; i++) {
    if (this.contains(spoilers[i])) {
      if (spoilers[i].classList.contains('afficher')) {
        spoilers[i].classList.remove("afficher");
        spoilers[i].classList.add("cacher");
        this.querySelector('.lienAfficher').textContent = "Voir le résumé";
      } else {
        spoilers[i].classList.remove("cacher");
        spoilers[i].classList.add("afficher");
        this.querySelector('.lienAfficher').textContent = "Cacher le résumé";
      }
    } else {
      spoilers[i].classList.remove('afficher');
      spoilers[i].classList.add('cacher');
      spoilers[i].closest('.spoilerDiv')
      .querySelector('.lienAfficher').textContent = "Voir le résumé";
    }
  }
}

[Valerie6377]

Bonjour Toufik83

Merci beaucoup - C'est formidable, ça fonctionne :-) Franchement je ne pensais à tout ça.
Je ne manipule pas Javascript depuis longtemps, et je tournais en rond sans jamais trouver.
J'ai retiré la classe "ouvrir" dans mon html puisqu'elle servait à jongler entre les mots "cacher le résumé" et "voir le résumé" dans mon jquery qui disparaît aussi.

Par contre je me demandais à quoi fait référence if (this.contains(spoilers[i])) {....
À la div où se trouve la fonction dans le html ? Je suis étonnée de commencer de cette façon sans préciser.
Mais du moment que ça fonctionne et que la console ne trouve pas d'erreur... :-)

Je n'ai plus qu'à mettre à jour mes 7 pages php.
Je suis super contente.

Valérie

[Toufik83]

Par contre je me demandais à quoi fait référence "if (this.contains(spoilers[i])) {...".

C'est une instruction qui vérifie si le spoilers[i] est un enfant du div cliqué ou pas, si oui il doit donc être traité séparément que les autres spoilers, sinon on le cache en lui rajoutant la classe cacher et supprimer la classe afficher.

À la div où se trouve la fonction dans le html ? Je suis étonnée de commencer de cette façon sans préciser.

Le mot clé this fait référence à <div class="spoilerDiv">....</div> que l'on a cliqué dessus, c'est comme si on dit à JS d'appeler la fonction ouvrirFermerSpoiler depuis le contexte du <div class="spoilerDiv">....</div>, ceci est possible avec Function.prototype.call(), et donc on peut passer la référence en tant que paramètre grâce à ouvrirFermerSpoiler.call(this).

[Valerie6377]

Merci pour ces explications.
J'ai encore appris beaucoup de choses aujourd'hui. :-)

Bon dimanche !

Valérie