这个JavaScript函数可以被重构吗？

我需要在项目中使用原型JavaScript库，并希望将选项卡框添加到HTML。这个JavaScript函数可以被重构吗？

单击处理程序有一个简单的任务 - 父<li>元素上选定的设置并显示链接DIV ID元（上<li>相对标记具有元素ID名）1小时的辛勤劳动后

<div class="tabInterface"> 
    <ul class="tabSelector"> 
    <li class="selected" rel="searchLast"><a href="#">Popularna iskanja</a></li> 
    <li rel="searchMine"><a href="#">Moje zadnje iskanje</a></li> 
    </ul> 
    <div class="tabContent selected" id="searchMine"> 
     box 1 content 
    </div> 
    <div class="tabContent" id="searchLast"> 
    box 2 content 

    </div> 
</div>

最终结果。

initTabInterface = function() { 
    //requires prototype 
    var tabClick = function(event){ 
     Event.stop(event); 
     var $el = Event.element(event); 

     var $menu = $el.up('.tabSelector'); 
     var liList = $menu.descendants().filter(function(el){return el.match('li')}); 
     liList.invoke('removeClassName', 'selected'); 
     $el.up().addClassName('selected'); 

     var rel = $el.up().readAttribute('rel'); 
     var $interface = $menu.up('.tabInterface'); 
     var tabList = $interface.descendants().filter(function(el){return el.match('.tabContent')}); 
     tabList.invoke('removeClassName', 'selected'); 
     $interface.down('#'+rel).addClassName('selected'); 
    }; 

    $$('.tabInterface .tabSelector li a').each(function(el){ 
     var $el = $(el); 
     Event.observe($el, 'click', tabClick); 
    }); 
}; 
Event.observe(window,"load", function(){ 
    initTabInterface(); 
});

是否有一种更容易的方式遍历原型而不是上下，过滤，匹配，调用和每个？

来源

2010-10-02 gregor

这是相当多的，你可以得到：

initTabInterface = function() { 
    //requires prototype 
    var tabClick = function(event){ 
     Event.stop(event);   
     var $el = Event.element(event); 
     var rel = $el.up().readAttribute('rel'); 

     // remove old selected classes 
     $el.up('.tabInterface').select('.selected') 
           .invoke('removeClassName', 'selected'); 

     // add new selected classes 
     [ $(rel), $el.up() ].invoke('addClassName', 'selected'); 
    }; 

    $$('.tabSelector li a').each(function(el){ 
     Event.observe($(el), 'click', tabClick); 
    }); 
}; 
Event.observe(window,"load", function(){ 
    initTabInterface(); 
});

来源

2010-10-02 17:55:48 galambalazs

就是它，选择方法是什么，我一直在寻找，而是得到了与后代，过滤器，的findAll，grep和他人牵制。原型只是如此方法poluted ... – gregor 2010-10-02 21:49:37

我不知道原型不够好，快速重构你的代码，但你可以使用Element.siblings而不是往上走，然后下降下来。或者，您可以按类名枚举（如果您有多个选项卡控件，则效果不佳）。

$el.siblings().invoke('removeClassName', 'selected');

而且

$interface.down('#'+rel).addClassName('selected');

是不必要的，因为你只能有一个元素与整个文档中的ID。可以把它改成：

$(rel).addClassName('selected');

来源

2010-10-02 17:56:48

我总是同意一个#id的评论 - 可以只有一个:) – gregor 2010-10-02 21:46:49

这个JavaScript函数可以被重构吗？

回答

相关问题