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 替换现有的 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()默认情况下执行此操作。当您load第一次调用时，您是在告诉它替换#contentdiv 内的 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 需要隐藏。

于 2013-07-01T15:54:24.007 回答