jquery - 更高效的 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 个位置。如果您不需要增加灵 active ，则可以简化一些代码 - 例如删除 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;
});