jQuery：单击时创建带有变量的可重用函数答案

【问题标题】：jQuery: Create reusable function with variable on clickjQuery：单击时创建带有变量的可重用函数
【发布时间】：2012-07-12 04:55:11
【问题描述】：

使以下代码可重用的正确方法是什么（这样我每次想要隐藏/显示一组 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（我认为 @可能使用了 987654323@），(2) 什么 div 到 fadeOut 和 (3) 什么 div 到 fadeIn。我似乎无法正确创建和传递变量，但我想最终的可重用函数看起来像这样：

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

提前非常感谢！

伯克利

【问题讨论】：

能否请您发布一些关于 div 的示例 html？

标签： javascript jquery css jquery-selectors

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

试试这个 (working example)：

function capitaliseFirstLetter(string)
{
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// Implementing:
function elementsToggler(elements)
{
    for (var i = 0; i < 2; i++)
    {
        $("#hide"+capitaliseFirstLetter(elements[i])).bind("click", { i: i }, function(e)
        {
            $("#"+elements[e.data.i]).fadeOut(400, function()
            {
                $("#"+elements[e.data.i === 0 ? 1 : 0]).fadeIn(400);
            });
        });
    }
}

// Binding:
elementsToggler(["instructionsOverview", "instructionsDetail"]);
elementsToggler(["groupOverview", "groupDetail"]);

【讨论】：

【解决方案3】：

你有：

function _setupClick(starterName, finalName){
    var initializer = $('#hide' + starterName.charAt(0).toUpperCase() + starterName.slice(1));
    var overview = $('#' + starterName);
    var detail = $('#' + finalName);
    initializer.click(function(){
        overview.fadeOut(400, function () {
            detail.fadeIn(400);
        });
    });
}
function setupClick(name){
    _setupClick(name + 'Overview', name.toLowerCase() + 'Detail');
    _setupClick(name + 'Detail', name.toLowerCase() + 'Overview');
}

setupClick('instructions');
setupClick('group');

【讨论】：

【解决方案4】：

有很多方法可以做到这一点

您可以尝试将要淡入的 div id 作为您单击的元素的属性，例如使用当前设置

html

<a id="groupOverview" class="clickClass" rel="#groupOverview">link here</a>

$('.clickClass').click(function() {
    var showThis = $(this).attr('rel');
    $( '#' + $(this).attr('id').replace('hide', '') ).fadeOut(400, function() {
        $( showThis ).fadeIn(400);
    });
});

您也可以使用不同的命名约定轻松应用这种设置。如果你有不同的 div ID 没有很好地匹配，你总是可以定义另一个属性来获取你需要的值。为了使其更具可读性，这里我逐行定义了js而不是all in one thing

$('.clickClass').click(function() {
    // gets the id attribute of clicked element and replaces the hide string with nothing (removes it). This works only because you have setup your html this way
    var hideThis = '#' + $(this).attr('id').replace('hide', '');

    // gets the rel which I have set to the id of the showing element
    var showThis = $(this).attr('rel');

    $( hideThis ).fadeOut(400, function() {
        $( showThis ).fadeIn(400);
    });
});

我没有时间制作样本，因为我在工作，但如果有什么不工作请告诉我，这应该很容易解决，但我认为这种结构最容易理解和实施

【讨论】：