关于Prototype Javascript的点击功能

时间:2010-11-18 10:15:00

标签: javascript prototypejs

HI,

我在我的应用程序中使用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>

我正在尝试单击“显示其他详细信息”时的任务,应显示该旁边的范围,并且应使用“隐藏其他详细信息”替换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。并将文本替换为显示其他详细信息

1 个答案:

答案 0 :(得分:3)

在您的活动功能中,检查范围是否可见。如果是,则隐藏它并将文本更改为“显示其他详细信息”,如果不是,则显示它并将文本更改为“隐藏其他详细信息”。

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

还要记住停止事件,以便浏览器实际上不会跟踪链接。