1

以下のコードを使用して、ページ コンテンツに jQuery フェードイン フェードアウト効果を作成しようとしています。

$(document).ready(function (){
$("#main").click(function(){
    $("#content").fadeOut(800, function(){
        $("#content").load("main.html", function(){
            $("#content").fadeIn(800);
        });
    });
});

$("#gallery").click(function(){
    $("#content").fadeOut(800, function(){
        $("#content").load("gallery.html", function(){
            $("#content").fadeIn(800);
        });
    });
});

});

したがって、ユーザーがメイン リンクまたはギャラリー リンクのいずれかをクリックするたびに、古いコンテンツがフェード アウトし、新しいコンテンツがフェード インします。私が直面している問題は、リンクごとに同じコードを何度も繰り返さなければならないことです。そのため、これを単純化するためにループを使用しようとしましたが、機能しません。これが私のコードです：

var p = ["#main","#gallery", "#contact"];
var q = ["main.html", "gallery.html", "contact.html"];
for (i=0;i<=(p.length-1);i++){
    $(p[i]).click(function(){
    $("#content").fadeOut(500, function(){
        $("#content").load(q[i], function(){
            $("#content").fadeIn(500);
        });
    });
});
}

リンクごとに繰り返しスクリプトを書くとうまくいきますが、それらをループで組み合わせるとうまくいきません。FadeOut 効果しか得られず、その後は何も起こりません。

これは非常に単純な問題である場合もあれば、jQuery の奥深い問題である場合もあります。ヒントやヘルプをいただければ幸いです。

TK

4

3 に答える 3

0

i 変数は常に 3 で評価されるため、q[i] は未定義になります。おそらくクラスのように、関連付けられた番号をコールバックまで保持する方法を見つける必要があります。

それが本当に 3 つのリンクだけである場合は、case ステートメントのような単純なものをお勧めします。

switch $(this).attr('id') {
    case 'gallery' : ; break;
    case 'contact' : y; break;
    case 'main' : z; break;
}

コードの重複が心配な場合は、ロードするページを受け入れる関数を作成し、各 .click() で呼び出すだけです

于 2010-06-17T05:17:48.223 に答える
0

i次のように、またはq[i]別のクロージャで現在の値を取得する必要があります。

function buildChangeOverTo(src)
{
    return function() {
        var content = $("#content");
        content.fadeOut(500, function(){
           content.load(src, function(){
               content.fadeIn(500);
        }});
    }
}

var p = ["#main","#gallery", "#contact"];
var q = ["main.html", "gallery.html", "contact.html"];
for (i=0;i<=(p.length-1);i++) {
    $(p[i]).click(buildChangeOverTo(q[i]));
}

これらの奇妙な JavaScript クロージャーに関する情報は、ウェブ上に山ほどあります。

于 2010-06-17T05:58:55.523 に答える
0

この問題には、fadeLink などのクラスをリンクに追加することで対処し、fadeUrl のようなカスタム属性をリンクに追加します。リンク先を各リンクの fadeUrl 属性に設定すると、ドキュメント対応コードは次のようになります。

$(document).ready(function (){
    $(".fadeLink").click(function(){
        var jqThis = $(this);
        $("#content").fadeOut(800, function(){
            $("#content").load(jqThis.attr("fadeUrl"), function(){
                $("#content").fadeIn(800);
            });
        });
    });
});

これはループを回避し、将来リンクを追加または編集するには、リンク上のデータを変更するだけで済みます。

于 2010-06-17T06:17:13.773 に答える