不是附加内容，而是替换它

Question

我使用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“、”标题-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] ]

我不知道为什么会出现在页面上。

然而，这将是一个小问题，但我会倾向于如果有人也可以帮助我的.slideDown(100);功能在最后，我希望每一个新的内容出来作为动画下滑，但它也不起作用。

谢谢你！

Answer 1

默认情况下，load()会这样做。当您首先调用load时，您告诉它替换#content div中的html。您需要使用GET或POST检索信息，然后将其附加到#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);
           }
        }
    }
});

您还需要做的是将contentpost类设置为隐藏在css中，如下所示：

.contentpost {
    display:none;
}

你需要这个否则滑倒就不行了。迪夫需要藏起来。