0

我正在尝试创建一个函数来加载 15 个新结果并将它们附加到之前使用 jQuery 加载的结果下方，有没有办法？

Javascript：

$(document).ready(function() {
    startindex = 1;
    loadmore = 15;

    src = "https://gdata.youtube.com/feeds/api/videos?category=games&alt=json-in-script&max-results=12&start-index=" + startindex;

    $.ajax({
        dataType: "jsonp",
        url: src,
        success: function(data, textStatus, jqXHR) {
            if (data.feed && data.feed.entry) {
                var list = [];

                $.each(data.feed.entry, function(i, e) {
                    list.push([
                        '<li class="video">',
                        '<img src="http://img.youtube.com/vi/' + e.id.$t + '/default.jpg" />',
                        '<a href="' + e.link[1].href + '">',
                        '<span>' + e.title.$t + '</span>',
                        '</a>',
                        '<span>' + e.author[0].name.$t + '</span>',
                        '</li>'
                    ].join(""));
                });

                $("#list").html(list.join(""));
            }
        }
    });

    function loadMore() {
        var startindex = parseInt(startindex) + parseInt(loadmore);
    }

});

HTML：

<ol id="list"></ol>
4

1 回答 1

2

您要做的是将您内部的大部分代码转换$(document).ready()为一个独立的函数，然后您可以在内部调用它$(document).ready()。该函数将采用两个参数，即开始位置和记录总数。

开始位置很容易通过计算您的 中已有项目的数量来获得<ol>，并且正在获取的记录总数将（大概）永远不会改变。

$(document).ready(function() {
  startindex = 1;
  loadmore = 15;
  addMore(startindex, loadmore);

  $('#addmore').on('click', function(e) {
    e.preventDefault();
    addMore($('#list li').length, 15);
  });
});

function addMore(startindex, loadmore) {
  src = "https://gdata.youtube.com/feeds/api/videos?category=games&alt=json-in-script&max-results=" + loadmore + "&start-index=" + startindex;

  $.ajax({
    dataType: "jsonp",
    url: src,
    success: function(data, textStatus, jqXHR) {
      if (data.feed && data.feed.entry) {
        var $list = $('#list');

        $.each(data.feed.entry, function(i, e) {
          $list.append('<li class="video"><a href="' + e.link[1].href + '"><span>' + e.title.$t + '</span></a><span>' + e.author[0].name.$t + '</span></li>');
        });
      }
    }
  });
}
ol {
    list-style: decimal;
    margin-left: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<ol id="list"></ol>
<a href="#" id="addmore">Add more</a>

http://jsfiddle.net/mblase75/PC6dn/1/

于 2012-07-05T15:21:15.863 回答