javascript - jQuery:在单击时创建带有变量的可重用函数

Question

使以下代码可重用的正确方法是什么(这样我就不必每次都使用相同函数的多个版本来隐藏/显示一组 DIV):

// instructions
$('#hideInstructionsOverview').click(function() {
    $('#instructionsOverview').fadeOut(400, function () {
        $('#instructionsDetail').fadeIn(400);
    });
});

$('#hideInstructionsDetail').click(function() {
    $('#instructionsDetail').fadeOut(400, function () {
        $('#instructionsOverview').fadeIn(400);
    });
});

// group
$('#hideGroupOverview').click(function() {
    $('#groupOverview').fadeOut(400, function () {
        $('#groupDetail').fadeIn(400);
    });
});

$('#hideGroupDetail').click(function() {
    $('#groupDetail').fadeOut(400, function () {
        $('#groupOverview').fadeIn(400);
    });
});

上面的代码以相同的方式用于隐藏“instructions”和“group”div(以及以相同方式隐藏大约 7 个其他 div)。每个调用的类似方式是使用此代码:

<a id="hideInstructionsOverview" href="javascript:void(0);"><img src="img/misc/plus.png" alt="" width="40" height="40" border="0"></a>
<a id="hideInstructionsDetail" href="javascript:void(0);"><img src="img/misc/minus.png" alt="" width="40" height="40" border="0"></a>

<a id="hideGroupOverview" href="javascript:void(0);"><img src="img/misc/plus.png" alt="" width="40" height="40" border="0"></a>
<a id="hideGroupDetail" href="javascript:void(0);"><img src="img/misc/minus.png" alt="" width="40" height="40" border="0"></a>

我在想有一种方法可以创建一个接受变量的函数，并在点击时传递三个变量:(1) 点击了什么图像 ID(我认为 $this 可能被使用)，(2) 什么 div 到 fadeOut 和 (3) 什么 div 到 淡入。我似乎无法正确创建和传递变量，但我想最终的可重用函数看起来像这样:

// divToggler
$('$this').click(function() {
    $('#divToFadeOut').fadeOut(400, function () {
        $('#divToFadeIn').fadeIn(400);
    });
});

提前致谢!

伯克利

Answer 1

理想情况下，您应该分层解决这个问题，而不是依赖大量 ID。这不是总是可能的，并且由于您没有发布您的 HTML 结构，我将只回答手头的问题。注意，这利用了 ECMA 5 的 Object.keys()方法。它需要修改才能在 IE <= 8 中使用。

var map = {
    hideInstructionsOverview: {out: 'instructionsOverview', in: 'instructionsDetail'},
    hideInstructionsDetail: {out: 'instructionsDetail', in: 'instructionsOverview'}
    /* etc... */
}

$('#'+Object.keys(map).join(', #')).on('click', function() {
    var thisMapEntry = map[$(this).attr('id')];
    $('#'+thisMapEntry.out).fadeOut(400, function () {
        $('#'+thisMapEntry.in).fadeIn(400);
    });
});

它可以通过一些关于命名约定的假设(从您发布的内容来看似乎合理)来缩短它，但我不会冒险这样做。