更高效的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

- Ivan Novak

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;
});     

- Andy Gaskell

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;
});

- strager