Question

这可能非常直截了当，但目前我想不出一个好方法（完整的大脑放屁）。

我目前有一个脚本，可以从youtube频道获取视频，并使用左右箭头显示当前视频和3个缩略图，以导航到上一个或下一个三个拇指，以选择另一个要观看的视频。

规范刚刚改变（再次），现在当点击箭头而不是3时，它只需向左或向右移动一个。

即。：

当前逻辑：

<<    [1] [2] [3]  >>  **click right** << [4] [5] [6] >>

所需逻辑

<<    [1] [2] [3]  >>  **click right** << [2] [3] [4] >>

代码：

var youtube = 
{
    author    : "XXXXXXX",
    pageNr    : 0,
    pageSize  : 3,
    pageCount : 1,
    videos    : [],
    gets      : function()
    {
        var _this = this;
        var url = "http://gdata.youtube.com/feeds/api/videos?author=" + this.author + "&start-index=" + (this.pageNr * this.pageSize + 1) + "&max-results=" + this.pageSize + "&v=2&orderby=published&alt=json-in-script&fields=openSearch:totalResults,entry(id,title,media:group(media:thumbnail,yt:videoid),yt:statistics)";
        $.getJSON(url + "&callback=?",
        function(response)
        {
            _this.show(response.feed.entry);
        });
    },
    start     : function()
    {
        var _this = this;
        var url = "http://gdata.youtube.com/feeds/api/videos?author=" + this.author + "&start-index=" + (this.pageNr * this.pageSize + 1) + "&max-results=" + this.pageSize + "&v=2&orderby=published&alt=json-in-script&fields=openSearch:totalResults,entry(id,title,media:group(media:thumbnail,yt:videoid),yt:statistics)";
        $.getJSON(url + "&callback=?",
        function(response)
        {
            _this.pageCount = Math.floor(response.feed.openSearch$totalResults.$t / 3);
            _this.show(response.feed.entry);
            $(".video-thumb").eq(0).click();
        });
    },
    next      : function()
    {
        if(this.pageNr >= this.pageCount){ return; }
        this.pageNr++;

        $(".video-thumb-picture-wrapper,#slider TD").removeClass("selected");

        this.gets();
    },
    prev      : function ()
    {
        if(this.pageNr <= 0){ return; }
        this.pageNr--;

        $(".video-thumb-picture-wrapper,#slider TD").removeClass("selected");

        this.gets();
    },
    show      : function(videos)
    {
        var _this = this;
        _this.videos = [];
        $(videos).each(function(index,video)
        {
            _this.videos.push(
            {
                id         : video.media$group.yt$videoid.$t,
                title      : video.title.$t,
            viewCount  : (video.yt$statistics && video.yt$statistics.viewCount ? video.yt$statistics.viewCount : 0),
            thumbnails : video.media$group.media$thumbnail
        });
    });

    $(".video-thumb-picture").each(function(index,div)
    {
        var video = index < _this.videos.length ? _this.videos[index] : { id : "", title : "", viewCount : 0, thumbnails : [{ url : "" }]  };
        $(div)
        .css("background-image","url('" + video.thumbnails[0].url + "')")
        .parent().next().html(video.title)
        .parent().css("visibility",(index < _this.videos.length) ? "visible" : "hidden");
    });
}
};

var appId = '';
window.fbAsyncInit = function()
{
    FB.init(
    {
        appId  : appId,
        status : true,
        cookie : true,
        xfbml  : true
    });

    FB.Canvas.setAutoResize();
};

$(function()
{
        $(".arrow-left").click(function()
    {
        youtube.prev();
    });
    $(".arrow-right").click(function()
    {
        youtube.next();
    });
    youtube.start();

    $("#div-share").unbind('click').click(function()
    {
        FB.ui(
        {
        method : 'feed',
        name   : '',
        link   : ''
        });
    });

    $(".video-thumb").click(function()
    {
        var div = $(this);
        if(div.css("visibility") == "hidden"){ return; }

        $(".video-thumb-picture-wrapper,#slider TD").removeClass("selected");
        div.children().first().addClass("selected").parent().parent().addClass("selected");

        var videoNr = parseInt(div.attr("videonr"));

        var video = youtube.videos[videoNr];
        var html = '<object id="div-video" style="height: 270px; width: 425px" width="425">';
        html += '<param name="play" value="true">';
        html += '<param name="wmode" value="transparent">';
        html += '<param name="movie" value="http://www.youtube.com/v/' + video.id + '?autohide=1&autoplay=1&fs=1&feature=player_embedded" />';
        html += '<param name="allowFullScreen" value="true" />';
        html += '<param name="allowScriptAccess" value="always" />';
        html += '<embed src="http://www.youtube.com/v/' + video.id + '?autohide=1&autoplay=0&fs=1&feature=player_embedded" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="270" wmode="transparent"></embed>';
        html += '</object>';
        $("#div-video").html(html);

        $("#div-video-title").html(video.title);
        $("#b-video-views").html(video.viewCount);

        $("#div-like").html('<fb:like href="http://www.youtube.com/watch?v=' + video.id + '" show_faces="false" width="350"></fb:like>');
        FB.XFBML.parse(document.getElementById('div-like'));

        $("#div-share").unbind('click').click(function()
        {
                FB.ui(
            {
                method : 'feed',
                name   : video.title,
                link   : ''
            });
        });
     });
 });

Answer 1

听起来你希望下一个是单一的，而不是一个页面。在这种情况下，您可能希望跟踪当前索引并增加它。您可以通过页面大小和起始页面的一些数学来完成此操作，但只跟踪当前索引会更简单。

this.curIndex = 1;
..."&start-index=" + (++this.curIndex)...

另外，当curIndex是页面大小的倍数时，您只想更改起始页面。

Answer 2

在gets（）和start（）中：

"&start-index=" + (this.pageNr + 1)

在开始（）中：

_this.pageCount = (response.feed.openSearch$totalResults.$t > _this.pageSize) ?
  (response.feed.openSearch$totalResults.$t - _this.pageSize) : (0);

就像aepheus提到的那样，我可能会在此时将pageNr重命名为curIndex（或类似的东西）。

规范变更 - 如何重构我的JavaScript逻辑？

2 个答案: