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","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);功能，我会感到很自豪，我希望每个新内容都以动画滑动的形式出现，但它也不起作用

三江源！

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

你需要这个或滑动不起作用。 div需要被隐藏。

附加不添加内容但替换它

1 个答案: