Sur la fonction de clic de Prototype Javascript

Question

HI,

J'utilise Prototype Javascript pour mon application. J'ai un Html comme

 <span style="display: none;"> 
     <span class="fn"> 
      <span class="given-name">NAME</span> 
      <span class="family-name">   </span> 
     </span> 
     <span class="email">email@gmail.com</span> 
     <span class="tel"></span> 
     <span class="role">Developer</span> 
     <a class="underlin" href="https://stackoverflow.com/users/username">View</a> 
     <a class="additional_click" href="">Show Additional Details</a> 
     <span style="display: none;" class="additional_detail"> 
      Personal Number : 82374894725 
     </span> 

    </span> 

J'essaie une tâche en cliquant sur Afficher les détails supplémentaires de la portée de côté qui doit être affiché et le innerHtml doit être remplacé par Hide Détails supplémentaires.

Et cliquant Masquer les détails supplémentaires, la durée (additional_detail) devrait cacher

 I have written a Javascript (Prototype) for this 

     $$(".additional_click").each(function(el){ 
     el.observe("click", function(event) { 
     event.element().next().show(); 
     el.replace("Hide additional details"); 

     }); 
    }); 

Comment écrire le Js pour le cliquant sur Masquer détails supplémentaires pour obtenir la durée de cacher. Et pour remplacer le texte par Afficher les détails supplémentaires

Answer 1

Dans votre fonction d'événement, vérifiez si la plage était visible. Si c'était le cas, cachez-le et changez le texte en "Afficher les détails supplémentaires", et si ce n'était pas le cas, affichez-le et changez le texte en "Masquer les détails supplémentaires".

$$(".additional_click").each(function(el) { 
    el.observe("click", function(event) { 
     if(el.next().visible()) 
     { 
      el.next().hide(); 
      el.innerHTML = "Show additional details"; 
     } 
     else 
     { 
      el.innerHTML = "Hide additional details"; 
      el.next().show(); 
     } 
     Event.stop(event); 
    }); 
}); 

Rappelez-vous aussi d'arrêter l'événement, de sorte que le navigateur ne suit pas vraiment le lien.