1

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

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

提前非常感谢！

伯克利

4

4 回答 4

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

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

于 2012-07-11T20:34:54.627 回答
0

试试这个（工作示例）：

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"]);
于 2012-07-11T20:25:42.800 回答
0

你有：

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');
于 2012-07-11T20:38:11.183 回答
0

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

您可以尝试将要淡入的 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);
    });
});

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

于 2012-07-11T20:41:42.067 回答