单击时更新对象

Question

我正在尝试使用教程/代码将 YouTube 播放列表添加到我的网站。如果结果超过 50 个，我不知道该怎么办。我检查了 youtube/google api 文档并获得了 nextPageToken 但我不知道如何处理它。 如何将 pageToken/nextPageToken/previousPageToken 对象（？）添加到选项变量中，以便在单击按钮时它会更新播放列表？我想在结果中添加分页而不重新加载页面。

这是教程中的代码。它可以按原样工作，但我无法观看超过 50 个视频（我使用的播放列表大约有 120 个）。当我将

pageToken: nextPageToken

添加到选项时，它表示 nextPageToken 未定义。 如何定义它和 previousPageToken 并使用它们来更新 pageToken 对象并更改页面上的结果？

$(document).ready(function () {

    var key = [YOUR API KEY HERE];
    var playlistId = 'PL2fnLUTsNyq7A335zB_RpOzu7hEUcSJbB';
    var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';


    var options = {
        part: 'snippet',
        key: key,
        maxResults: 50,
        playlistId: playlistId
    }

    loadVids();

    function loadVids() {
        $.getJSON(URL, options, function (data) {
            var id = data.items[0].snippet.resourceId.videoId;
            mainVid(id);
            resultsLoop(data);
        });
    }

    function mainVid(id) {
        $('#video').html(`
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                `);
    }

        
    function resultsLoop(data) {

        $.each(data.items, function (i, item) {

            var thumb = item.snippet.thumbnails.medium.url;
            var title = item.snippet.title;
            var desc = item.snippet.description.substring(0, 100);
            var vid = item.snippet.resourceId.videoId;


            $('main').append(`
                            <article class="item" data-key="${vid}">

                                <img src="${thumb}" alt="" class="thumb">
                                <div class="details">
                                    <h4>${title}</h4>
                                    <p>${desc}</p>
                                </div>

                            </article>
                        `);
        });
    }

        // CLICK EVENT
    $('main').on('click', 'article', function () {
        var id = $(this).attr('data-key');
        mainVid(id);
    });


});

Answer 1

查看

data.nextPageToken

函数中的

resultsLoop()

，了解可以为下一次

pageToken

调用的选项中的

getJSON()

值指定的下一个页码。