如何在Javascript中一次顯示X個div的數量？

Question

假設我有名字的數組：

var myarray = ["A", "B", "C", "D", ... "J"] 

說，如果我在我的陣列10項，我只希望在任何給定時間顯示3。我該如何使每個條目（如果顯示）都以紅色顯示，並帶有「返回」鏈接和「下一步」鏈接？當我點擊下一步，它會顯示下一個3;當我點擊以前它會顯示先前的3

例子：

最初3周的div顯示在 「下一步」

"A" "B" "C" 

點擊顯示

"D" "E" "F" 

點擊「前面的「顯示

"A" "B" "C" 

點擊「下一步」3次顯示只有1格 「J」

如何用Javascript或jQuery去解決這個問題？任何樣品表示讚賞。

Answer 1

剛剛颳起的東西了。我認爲這有一個更好的模式...但它應該適用於任何數組。

這有 '未來' 和 '下一頁' 按鈕：http://jsfiddle.net/aEYSB/

(function(){ 
    var index = 0, 
     increment = 3, 
     container = $('#container'), 
     arr = [ 0,1,2,3,4,5,6,7,8,9,10,11,12 ], 
     len = arr.length, 
     limit = len - 1, 

    renderMarkup = function(){ 
     var markup = [ 
     '<p>' + arr[index] + '</p>' 
     ]; 
     container.append(markup.join(''));   
    }; 

    $('#next').click(function(){ 
     container.empty(); 
     for(var i = 0; i < increment; i++){ 
     renderMarkup(); 
     if(index === limit){ break; } 
     index++; 
     } 
    }); 

    $('#prev').click(function(){ 
     container.empty(); 
     for(var i = 0; i < increment; i++){ 
     renderMarkup(); 
     if(index === 0){ break; } 
     index--; 
     } 
     var p = $('p').get().reverse(); 
     container.empty().append(p); 
    }); 
})();​ 

這將形成連續的旋轉木馬：http://jsfiddle.net/fSNhK/

(function(){ 
    var index = 0, 
     increment = 3, 
     container = $('#container'), 
     arr = [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13 ], 
     len = arr.length, 
     limit = len - 1, 

    renderMarkup = function(){ 
     var markup = [ 
     '<p>' + arr[index] + '</p>' 
     ]; 
     container.append(markup.join(''));   
    }, 

    controlIndex = function(){ 
     (index === limit) ? index = 0 : index++; 
    }; 

    $('#toggle').click(function(){ 
     container.empty(); 
     for(var i = 0; i < increment; i++){ 
     renderMarkup(); 
     controlIndex(); 
     } 
    }); 
})();​ 

Answer 2

嘗試一個在這裏：http://www.jquery4u.com/plugins/10-jquery-pagination-plugins/#.UElwFo0geSo 還是真的很快找jQuery的分頁

Answer 3

Set start = 0; 

Loop from start to start + 3; 

Change start to start+3 , and loop again 

Answer 4

這裏有一個解決方案 - http://jsfiddle.net/joplomacedo/3edpw/ - 可以作爲你的建議。

var prev = document.getElementById('previous'), 
    next = document.getElementById('next'), 
    log = document.getElementById('log'), 
    array = [0,2,3,9,32,2,5,8,9, 79], 
    count = 0, 

    updateLog = (function() { 
     var x, 
      amount_to_show = 3; 

     return function() { 
      x = count * amount_to_show; 
      log.innerText = array.slice(x, x+amount_to_show).join(', '); 
     }; 
    })(), 

    nextClick = (function() { 
     var x = Math.ceil(array.length/3 - 1); 

     return function() { 
      if (count != x) { 
       ++count ; 
       updateLog(); 
      } 
     }; 
    })(), 

    previousClick = function() { 
     if (count != 0) { 
      --count; 
      updateLog(); 
     } 
    }; 


prev.onclick = previousClick; 
next.onclick = nextClick; 

updateLog(); 

Answer 5

試試這個

HTML

<div class="main"> 
    <input type="submit" value="next" id="next"> 
    <input type="submit" value="prev" id="prev"> 
    <div class="show"></div> 
</div> 

JS代碼

$(document).ready(function(){ 
    var arr = ['a', 'b', 'c', 'd','e','f']; 
    var goindex = []; 
    var len=0; 
    $('#next').on('click', function(){ 
     var next= []; 
     for(var i=len; i<len+3; i++){ 
      next[i] = arr[i]; 
      goindex[i]=i; 
     } 
     len += 3; 
     console.log(len); 
     $('.show').text(next); 

    }); 

    $('#prev').on('click', function(){ 
     var prev = []; 
     console.log(len); 
     var newlen=0; 
     if(newlen>=0){ 
      for(var i=len-1; i>=newlen; i--){ 
       prev[i] = arr[i]; 
      } 
     } 
     newlen=len-3; 
     len-=3; 
     $('.show').text(prev); 
    }); 
}); 

JS FIDDLE LINK