comment changer les éléments cliqués innerHTML dans le prototype

Question

J'ai une structure Html comme

<p> 
     <a onclick="try { 
     toggle_detail(&quot;additional&quot;); 
     } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('toggle_detail(\&quot;additional\&quot;);'); throw e }; return false;" href="#">Show   </a> 
</p> 

<div id="additional"> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    <p>4</p> 
</div> 

Je suis en train d'écrire un prototype pour montrer la div supplémentaire cliquant afficher et masquer le cacher.

$$("."+element_id).each(function(el){ 
     if(el.visible()){el.hide(); 

      // el.previous(0).innerHTML="Show"; 

    } 
     else {el.show(); 
      // el.previous(0).innerHTML="Hide"; 
    } 
    }); 

où element_id = "supplémentaire"

Comment mettre à jour le innerHTML du lien pour afficher/cacher? Je ne sais pas comment mettre à jour le innerHtml cliqué dans le lien .. Pls donner des suggestions

Answer 1

Ajoutez ceci à votre click handler.

this.innerHTML = (this.innerHTML == 'Show')?'Hide':'Show'; 

ou ajouter l'appelant comme paramètre à votre fonction toggle_detail

toggle_detail(this, "additional"); 

et changer la fonction d'accepter ce paramètre supplémentaire

function toggle_detail(clickButton, className){ 
    // do what you want with clickButton // 
} 

En outre, il est logique de ne pas modifier le texte à l'intérieur du each. Vous devriez le faire une seule fois avant ou après l'appel each.

Bonus: Au lieu de if(el.visible()) el.hide(); else el.show(), vous pouvez simplement utiliser el.toggle().