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

更高效的jQuery

2 个答案: