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

以上代码以相同的方式用于隐藏“指令”和“分组”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（我认为{可能会使用{1}}，（2） div为$this和（3） div为fadeOut。我似乎无法获得变量创建和传递正确，但我想最终的，可重用的函数看起来像这样：

fadeIn

提前非常感谢！

Berklie

Answer 1

理想情况下，您可以分层次地处理此问题，而不是依赖于大量ID。这不是始终可能，并且由于您没有发布HTML结构，我只会回答手头的问题。注意，这使用ECMA 5的Object.keys()方法。它需要修改以用于IE＆lt; = 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);
    });
});

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

Answer 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"]);

Answer 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');

Answer 4

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

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

HTML

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

JS

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

您也可以使用不同的命名约定轻松应用此类设置。如果你有不同的div ID，那么你可以总是定义另一个属性来获取你需要的值。为了使它更具可读性，我在这里逐行定义了js，而不是一次性定义了

$('.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);
    });
});

我没有时间制作样本，因为我在工作，但如果某些东西不起作用，请告诉我，这应该是一个简单的解决办法，但我认为这种结构最容易理解和实施

jQuery：在点击时创建带有变量的可重用函数

4 个答案: