更高效的jQuery

Question

我有下面的代碼來控制相互依賴的組的表示。當前的代碼工作，我想知道是否有一種方法來簡化代碼，以減少重複。

$('div.locUpd').hide(); 
    $('div.locDel').hide(); 
    $('div.addLocation').hide(); 
    $('a.edit').click(function(){ 
     $(this).parent().nextAll('div.locUpd').slideToggle(400); 
     $('div.locDel').slideUp(400); 
     $('div.addLocation').slideUp(400); 
     return false; 
    });  
    $('a.del').click(function(){ 
     $(this).parent().nextAll('div.locDel').slideToggle(400); 
     $('div.locUpd').slideUp(400); 
     $('div.addLocation').slideUp(400); 
     return false; 
    });  
    $('p.buslocadd').click(function(){ 
     $(this).prev('div.addLocation').slideToggle(400); 
     $('div.locUpd').slideUp(400); 
     $('div.locDel').slideUp(400); 
     return false; 
    });  

有沒有更有效的方法來寫這個？

編輯 ----------------

這裏的HTML結構：

div.mbuslocations 
    div.location 
     span.lmeta 
      a.edit 
      a.del 
     div.locUpd 
     div.locDel 
div.addLocation 
p.buslocadd 

Answer 1

這增加了複雜性的一點點，但更靈活變化。如果你想改變持續時間或者增加滑動效果，你不必在9個地方編輯代碼，只需要1或2個。如果你不需要增加靈活性，你可以簡化一些代碼 - 例如除去getDuration功能，只是硬編碼400

function getDuration() { 
    return 400; 
} 

function slideToggleDiv(t, selector) { 
    t.parent().nextAll(selector).slideToggle(getDuration()); 
} 

function slideUpDiv(selected) { 
    selected.slideUp(getDuration()); 
} 

$('div.locUpd, div.locDel, div.addLocation').hide(); 

$('a.edit').click(function(){ 
    slideToggleDiv($(this), 'div.locUpd'); 
    slideUpDiv($('div.locDel, div.addLocation'));  
    return false; 
});    

$('a.del').click(function(){ 
    slideToggleDiv($(this), 'div.locDel'); 
    slideUpDiv($('div.locUpd, div.addLocation'));  
    return false; 
});  

$('p.buslocadd').click(function(){ 
    slideToggleDiv($(this), 'div.locUpd'); 
    slideUpDiv($('div.locDel, div.locUpd'));  
    return false; 
});  

Answer 2

// Untested. 

var parts = { 
    '.edit': '.locUpd', 
    '.del': '.locDel', 
    '.buslocadd': '.addLocation' 
}, 
    selectedParts = $(), 
    root = document, 
    i; 

// TODO Make jQuery-ish. 
for(i in parts) { 
    selectedParts = selectedParts.add($(parts[i], root)); 
} 

// Hide everything. 
selectedParts.hide(); 

// Click to hide all but this (kinda?). 
selectedParts.click(function() { 
    for(i in parts) { 
     if($(this).is(i)) { 
      $(this).parent().nextAll(parts[i]).toggleSlide(400); 
     } else { 
      $(parts[i], root).slideUp(400); 
     } 
    } 

    return false; 
});