javascript - 关于原型(prototype)Javascript的点击功能

Question

你好，

我正在为我的应用程序使用 Prototype Javascript。我有一个像

这样的 Html

     <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="/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>

我正在尝试一项任务，当单击 Show Additional details 时，应该显示旁边的 span 并且 Innerhtml 应该替换为 Hide Additional Details 。

点击 Hide additional Details 时，span (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);
    });
});

还记得停止该事件，这样浏览器就不会真正访问该链接。