Jquery：ページのスクロールで5 divを表示

Question

私のページに10個のdivがあります。最初のdivは表示され、他のdivは非表示になります。

div1,div2,div3----div10 

私は5 divを表示したいです。

div2----div6 
div7---div12 (div12 not exist. i know but just want to show you limit) 

目と2回目のページスクロールの私は再び5 divのを表示するようにし、より10のdivがある場合、それが再び起こるだろうしたいです。

total_data = 10 
limit= 5 
....Page scroll code comes here..... 
for(i =1; i<=limit; i++) 
div show i; 
total_data= total_data +1 
} 

私はロジックを探しているだけです。クリーンなコードを書くつもりです。現時点で私は私のマシンから離れているので、すべてのものをモバイルに入力することはできません。

みんな私はあなたがその質問を理解することは難しいと知っています。その不明な点がこの質問を編集するかどうか私に教えてください。

Answer 1

（あなたは、これはコードの単なるアイデアです尋ねたように）私はそれをこのようにします：

var scrollTimes = 0; 
$('body').on('scroll',function(){ 
scrollTimes++; //also add if statement when the scroll times reaches maximum to restart 
var limit = scrollTimes + 5; 
for(i = scrollTimes; i<=limit; i++) 
    var x = i+5; 
    div show x; //example $('#div' + x).show(); 
} 
}); 

私は、これはあなたが開始を取得願っています。

Answer 2

私はそれを試していません。しかし、あなたはそれの要点を得ることを願っています。私はそれらの線に沿って何かを考え出した。

var arrayOfDivs = $(".divs"); // divs to appear/disappear 
var currentlyShownDivs = 1; // shown divs upon loading page 
//optionally make the code more flexible by adding a variable for the no of divs to show. 

$(body).scroll(function(){ 
//if function to detect scrollup or scrolldown 
    //on scrolldown 
    arrayOfDivs.hide(); 
    for(i=0; i<5 ;i++){ 
     if(i+currentlyShownDivs > arrayOfDivs.length){//stop code when scrolling too far 
      break; 
     } 
     if(i+currentlyShownDivs < arrayOfDivs.length){ //don't run the code if divs to display do not exist 
      arrayOfDivs.eq(i+currentlyShownDivs).show(); // show the next 5 divs one by one 
     } 
     if(i+currentlyShownDivs = arrayOfDivs.length || i=4){ 
      currentlyShownDivs += 5;//one time increment to enable the code to run for the next 5 divs. 
     } 
    } 
    //on scrollup 
     //simular code to do the opposite from scrolldown. 
});