這個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函數可以被重構嗎？

回答

相關問題