仕様の変更 - JavaScriptロジックをリファクタリングする方法

Question

これはおそらくかなり単純ですが、現時点で私はこれを行う良い方法（完全な脳のおなら）を考えることができません。

私は現在、YouTubeチャンネルからビデオを取り込み、現在のビデオとその下の3つのサムネイルを左右の矢印で表示して、前後の3つのサムに移動して別のビデオを選択するスクリプトを持っています。

スペックだけで（再び）に変更し、今ではただ1つを移動する必要がある矢印が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

では、（取得）と（）開始：

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

スタートで（）：

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

aepheusが言及したように、私はおそらくcurIndexにpageNrの名前を変更（またはのようなもの）思いでこの点。

Answer 2

あなたは次のシングルではなく、ページになりたいように聞こえます。その場合は、現在のインデックスを追跡してインクリメントしたいと思うでしょう。これは、ページサイズと開始ページで数学的に行うことができますが、現在のインデックスを追跡する方がはるかに簡単です。

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

また、curIndexがページサイズの倍数である場合にのみ、開始ページを変更する必要があります。