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

上記のコードは、「命令」と「グループ」の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>

変数を受け入れる関数を作成する方法があり、クリック時に3つの変数を渡す方法があると思います：（1）$thisクリックされた画像ID（おそらく使用されていると思います）、 （2） div to （3）どのdivfadeOutを。変数の作成と受け渡しを正しく行うことができないようですが、最終的な再利用可能な関数は次のようになると思います。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

これを行うには多くの方法があります

たとえば、現在の設定を使用して、クリックしている要素の属性としてフェードインしたい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 を 1 つにまとめて定義するのではなく、1 行ずつ定義しています。

$('.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 に答える
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 に答える