jquery - 寻求意见，jQuery : (an exercise) I want to join 5x seperate functions into 1x jQuery function

Question

代码摘录: http://jsfiddle.net/chrisloughnane/9AjfU/

完整的代码将 .tabs 和所有其他元素放置在一个 AJAX 填充的 jQuery UI 模式中，并且它工作得很好。

这里我有每个 jQuery slideUp() div s 与您悬停在其上的 tab 和 slideDown( ) 执行此操作的 div 。

我想知道将所有单独的 jQueries 合并为一个的最佳方式是什么。

函数 all() 存在，因为我在 jQuery UI 模式对话框中有这个:

$('#your-dialog-id').dialog({
    open: function(event, ui) {
    $('.scroll-box').css({'max-height': bottomPosition-150, 'overflow-y': 'scroll'});
    all();}, //etc.

在每个 jQuery .on("mouseover", 中，div 都是动态添加的。我还没有把它们拿走，因为我计划完全重写。

Answer 1

试试这个 - http://jsfiddle.net/9AjfU/2/

HTML

<ul>
    <li class='all'>all</li>
    <li class='musicselect'>music</li>
    <li class='sportselect'>sport</li>
    <li class='artsselect'>arts</li>
    <li class='generalselect'>general</li>
</ul>

jQuery

$('.tabs li').on("mouseover", function(){
    $('.general, .music, .sport, .arts').slideUp();
    $('.' + $(this).attr("class").replace("select", "") ).stop(true, true).slideDown();
    $('.tabs li').css('color', '#fff');
    $(this).css('color', '#66CBFF');
});