關於原型的點擊功能Javascript

Question

嗨，

我對我的應用程序使用Prototype Javascript。 我有喜歡

 <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> 

一個HTML我想上顯示點擊的其他細節跨度旁邊時的任務應顯示和的innerHTML應該隱藏其他詳細信息被替換。

而就點擊隱藏更多詳細信息，跨度（additional_detail）應該隱藏

 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"); 

     }); 
    }); 

如何寫JS的上單擊隱藏其他詳細信息，以獲得跨越隱藏。並將文本替換爲顯示其他詳細信息

Answer 1

在您的事件功能中，檢查跨度是否可見。如果是，則隱藏它並將文本更改爲「顯示更多詳細信息」，如果不是，則顯示它並將文本更改爲「隱藏其他詳細信息」。

$$(".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); 
    }); 
}); 

還記得停止事件，以便瀏覽器不會實際上跟隨鏈接。