1

jquery.load関数を使用してサーバーから結果をロードし、htmlに追加しています:

$("#content").load('Get/classPosts?class=arts&min=1', function (responseText, textStatus, XMLHttpRequest) {
arr = $.parseJSON(responseText);
for (i = 1; i < arr.length; i++) {
    if (arr[i] != null) {
        $('#content').append("<section class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>").slideDown(100);
    }
}
});

データのフェッチと.load表示に関する限り、問題はありませんが、これに直面している問題はほとんどありません。

  • 最も重要なことは、実際には末尾に新しいデータを追加するのではなく#content、既存の html を新しいものに置き換えるだけであるということです。

  • 新しいデータを先頭に挿入する前に、#content生の JSON 文字列が次のように表示されます。

    [
["93","Title-1","http://stackoverflow.com"],
["92"," Title-2","http://stackoverflow.com"],
["90"," Title-3","http://stackoverflow.com"],
["89"," Title-4","http://stackoverflow.com"],
["89"," Title-5","http://stackoverflow.com"],
null,null,null,null,null]

なぜそれがページにあるのかわかりません。

ただし、これは少し問題になりますが、誰かが最後に機能するのを手伝ってくれるなら、私は感謝し.slideDown(100);ます.新しいコンテンツをスライドダウンするアニメーションとして出力したいのですが、それも機能しません.

ありがとう！

4

1 に答える 1

8

load()デフォルトでこれを行います。最初に呼び出すと、 divload内の html を置き換えるように指示されます。またはを使用して情報を取得し、 に追加する#content必要があります。GETPOST#content

このようなもの：

$.get('Get/classPosts?class=arts&min=1', function (data) {
    if(data.length > 0) {
        arr = $.parseJSON(data);
        var newId;
        for (i = 1; i < arr.length; i++) {
            if (arr[i] != null) {
                // unique id for slidedown to work
                newId = $('.contentpost').length;
                $('#content').append("<section id='contentpost-"+newId+"' class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>");
                // slide down pointing to the newly added contentposts only
                $('#contentpost-'+newId).slideDown(100);
           }
        }
    }
});

また、次のように、css で contentpost クラスを hidden に設定する必要があります。

.contentpost {
    display:none;
}

これが必要です。そうしないと、スライドダウンが機能しません。div を非表示にする必要があります。

于 2013-07-01T15:54:24.007 に答える