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()この関数は、開始位置とレコードの総数の2つの引数を取ります。

開始位置は、すでに存在するアイテムの数を数えることで簡単に取得でき、<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 に答える