Javascript - 26 functions ou une seule ?

[Zecat]

Comme je suis JavascriptRank=0 j'ai besoin d'aide.

Probleme posé : j'utilise ce type de fonction :

Code: Tout sélectionner

<script>
var hide = true;
function showcomment()
{
   if (hide)
      {
         document.getElementById("zonecomment").style.display='block';
         hide = false;
      }
      else
      {
         document.getElementById("zonecomment").style.display='none';
         hide = true;
      }   
}


ensuite appelé ainsi :

Code: Tout sélectionner

<a name="comment"></a>
<a onclick="showcomment()" style="cursor:pointer">
   <div align="center">
      <B><u>Suite ...</u></B>
       </div>
</a>
                       <br>
<div id="zonecomment" style="display:none">
       <?=$texte_com2?>
       <br>
</div>

pour mettre une zone déployable/contractable sur ma page. Jusque là tout baigne.

Maintenant je vais vouloir positionner sur 26 lettres de l'alphabet, le même principe (chaque lettre déployant une zone différente bien sûr).

Si je fonce tête baissée, je colle 26 fonctions showA showB etc ... dans mon head et ca roule ... mais ca me parait confusément un peu "barbare" pour être la bonne démarche Dois je faire cela ou dois je jouer avec les noms d'élement et alors comment ?

Rappel : je suis javascripRank=0 donc si c'est technique, faudra me parler gentiment avec des mots simples

Pour etre complet sur ce que je veux obtenir :

A
B
C
D
......

Le clic sur B donnera :

A
B
b1
b2
b3
C
D

Puis clic sur C

A
B
b1
b2
b3
C
c1
c2
c3
D

Bon ca c'est disons le minimum acceptable (mais ca oblige le visiteur a recontracter B si il veut voir uniquement C. Et donc la cerise on ze cake serait que le clic sur C contracte B et donc que le clic sur une lettre contracte la derniere lettre ouverte. Bon ca je dois arriver à le faire à la bucherone avec mes 26 functions en jouant sur les display mais bon pour le moment je fais rien en attendant un peu de visibilité.

Precision : j'ai deja d'autres zones deployables sur la page et donc faut pas qu'une contraction auto s'applique a toutes mais uniquement à mon paquet de 26. Voila je crois que le cahier des charges est complet

[UsagiYojimbo]

Bein spa compliqué : il te suffit à chaque fois de passer en paramètre de showcomment l'identifiant de la zone à tester :

Code: Tout sélectionner

function showcomment(identifier)
{
   if (hide)
      {
         document.getElementById(identifier).style.display='block';


Je ne t'ai collé que la première partie de la fonction, mais tu sauras facilement impacter cela sur la suite.

Et dans ton HTML tu auras donc :

Code: Tout sélectionner

<a onclick="showcomment('zonecomment')" style="cursor:pointer">

Il te suffit donc de donner des identifiants uniques à tes zones dépliables.

Par contre pour gérer ce genre de choses, je ne saurais que trop te conseiller de passer par un framework JS, genre prototype ou jQuery qui permettent beaucoup plus simplement de masquer/démasquer des éléments (avec prototype tu as notamment toggle())

[dmathieu]

Et avec jQuery tu as show/hide.

Qui plus est j'ajouterai un conseil supplémentaire : ne mets rien en inline.
Au lieu de faire :

Code: Tout sélectionner

<a onclick="showcomment();>

Fait :

Code: Tout sélectionner

<a class="comment">

Et dans ton fichier javascript externe, avec jQuery (Prototype inclut les évènement également. Et en étant très courageux, tu peut le faire en javascript pur aussi) :

Code: Tout sélectionner

$('.comment').click(function() {
    // Exécuté au click sur le lien. Affiche/masque les commentaires

    // Et on ignore le clic (pour ne pas recharger la page).
    return false;
});

[UsagiYojimbo]

Judicieuse remarque de dmathieu. Un écouteur d'évènement est quand même bien plus propre et évite de surcharger inutilement le HTML.

[Zecat]

Bein spa compliqué : il te suffit à chaque fois de passer en paramètre de showcomment l'identifiant de la zone à tester :

Donc je dois mettre le script 26 fois dans mon head ? ou j'ai rien pigé

[spout]

1 seule fonction JS avec le paramètre "identifier" comme l'exemple de UsagiYojimbo.

Et la version de dmathieu avec jQuery est encore mieux

[Zecat]

1 seule fonction JS avec le paramètre "identifier" comme l'exemple de UsagiYojimbo.

Et la version de dmathieu avec jQuery est encore mieux

Bon je vais tester on verra bien ...

Sinon qu'on se le dise : je suis allergique aux framework

[Bacteries]

En javascript c'est quasi indispensable. C'est pas un framework mais une bibliothéque de librairie qui permettent de "mettre à jour" javascript en proposant des choses pour simplifier le code.
Autant en PHP l'utilisation d'un framework peut se discuter, en JS utiliser un truc comme jQuery ou Prototype c'est quasi indispensable (ne serais ce que pour avoir un code propre, clair et lisible).

Exemple avec ce qu'a mis dmathieu.

[Zecat]

oui mais je n'ai pas l'intention de me mettre au JS (j'ai fini d'user mon "capital neurone" avec le php Hé les mecs, les papys ca en a plus autant que quand on a 20 ans ). Juste utiliser ponctuellement un fonction ou deux.

[Zecat]

Bein spa compliqué : il te suffit à chaque fois de passer en paramètre de showcomment l'identifiant de la zone à tester :

Code: Tout sélectionner

function showcomment(identifier)
{
   if (hide)
      {
         document.getElementById(identifier).style.display='block';


Je ne t'ai collé que la première partie de la fonction, mais tu sauras facilement impacter cela sur la suite.

heu non ... (identifier) c'ets quoi .. un mot cle de javascrip ou un truc que je dois changer ?

tu veux pas me faire un exemple concret avec A B C ... La je saurais aller jusqu'à Z

[UsagiYojimbo]

Bein le morceau que tu mets en exemple est la fonction, donc identifier est le paramètre, tu peux donc le laisser comme tel.
C'est à l'appelant que ça va changer, regarde le second extrait de code que je t'ai donné, avec ton exemple. Mais pour le coup passer par un système de listener en JS sera bien plus intéressant.

[Zecat]

c'est good ! ca marche. Merci usagi pour ton debug en MP.