1

我面临以下问题。我有一个函数可以成功返回 JSON 数据。我正在尝试无限滚动，所以在这个函数中，我正在准备 html 以在另一个函数中循环，这将完成这项工作。服务器将 JSON 返回为：

{ "id" : 6,
  "title" : "Store Title #1",
  "movies" : [{ "id" : 1164,
                "title" : "Movie 1",
                "publishDate" : "1993-01-01T00:00:00",
                "description" : "{long description...}" },
              { "id" : 8452,
                "title" : "Movie 2",
                "publishDate" : "1985-01-01T00:00:00",
                "description" : "{long description...}" },
              { "id" : 6451,
                "title" : "Movie 3",
                "publishDate" : "1945-01-01T00:00:00",
                "description" : "{long description...}" }]
}

成功函数：

     function onsuccess(data) {
        var libraryInfoHTML = '<h2 data-id="' + data.id + '">' + data.title + '</h2><ul></ul>';
        var receivedData = data.movies;
        var loopHTML = 
            '<li>' +
                '<h3 class="clear"><span class="icons video-library video-icon"></span>' +
                    '<a href="#" title="' + receivedData[i].title + '" data-id="' + receivedData[i].id + '">' +
                        receivedData[i].title +
                    '</a>' +
                '</h3>' +
                '<h4 class="clear"><span class="icons publish-date"></span>' +
                    receivedData[i].publishDate +
                '</h4>' +
                '<p>' +
                    receivedData[i].description +
                '</p>' +
            '</li>';
    infinityScroll(receivedData, loopHTML);
}

无限滚动功能：

function infinityScroll(received_data, loop_HTML) {
    var i=0;
    var length = received_data.length;
    var items_to_load = 10;
    function loop() {
        var html_maker = '';
        for(; i<items_to_load; i++) {
            html_maker +=
                loop_HTML;
        }
        items_to_load += i;
        $('#container ul').append(html_maker);
    }

    function scroller() {
        if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.95){
            loop();
        }
    }
    $(window).scroll(scroller);
}

所以第一个函数给出了错误，因为“i”是未定义的。我想将“loopHTML”内容传递给“function loop()”，并希望它循环“receivedData[i]”。我想我应该将“loopHTML”内容转换为字符串，但是如何告诉 unstring “receivedData[i]” 位置？你能告诉我更好的方法吗？请不要向我推荐插件，因为我想做简单的无限滚动。提前致谢！

4

1 回答 1

0

我认为您想要的是将一个函数传递给包含接收到的数据并且可以i作为参数的 infinityScroll：

 function onsuccess(data) {
     var libraryInfoHTML = '<h2 data-id="' + data.id + '">' + data.title + '</h2><ul></ul>';

     var htmlFunction = (function () {
         var receivedData = data.movies;
         return function (i) {
             if (i < receivedData.length) {
                 return '<li>' +
                     '<h3 class="clear"><span class="icons video-library video-icon"></span>' +
                     '<a href="#" title="' + receivedData[i].title + '" data-id="' + receivedData[i].id + '">' + receivedData[i].title +
                     '</a>' +
                     '</h3>' +
                     '<h4 class="clear"><span class="icons publish-date"></span>' + receivedData[i].publishDate +
                     '</h4>' +
                     '<p>' + receivedData[i].description +
                     '</p>' +
                     '</li>';
             }
         };
     })();
     infinityScroll(htmlFunction);
 }

然后调整infinityScroll...

function infinityScroll(loopHtmlFunction) {
    var items_to_load = 10;
    var i = 0;
    var html;
    function loop() {
        var html_maker = '';
        for(; i<items_to_load && html = loopHtmlFunction(i); i++) {
            html_maker += html;
        }
        items_to_load += i;
        $('#container ul').append(html_maker);
    }    
    // etc.
}

请注意，这还会检查是否有更多电影数据，receivedData如果没有，则不会再添加到 html 中。但是，您可能需要调整该infinityScroll功能的其余部分，以便在没有更多电影数据时停止尝试滚动。

于 2013-02-08T16:39:22.380 回答