2016-07-18 13 views
0

Ich habe 10 Divs in meiner Seite. 1. div ist sichtbar und andere sind versteckt.Jquery: show 5 div auf Seite scroll

div1,div2,div3----div10 

Auf Seite blättern Ich möchte 5 Div.

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

und auf zweites Mal Seite blättern i 5 div zeigen will wieder und es wird wieder passieren, wenn es mehr als 10 divs ist.

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

Bitte haben Sie keine Angst vor den Tippfehlern Ich bin nur auf der Suche nach Logik. Ich werde den sauberen Code schreiben. Im Moment bin ich von meiner Maschine so weg, kann keine ganzen Sachen auf Handy tippen.

Jungs ich weiß, es wäre schwer für Sie, die Frage zu verstehen. Lassen Sie mich wissen, wenn es unklar ist, werde ich diese Frage bearbeiten.

+0

@Vucko Danke. Ich werde auf die Frage eingehen, die Sie erwähnt haben. – Ironic

+0

Ich habe diese Frage überprüft, aber ich denke nicht, dass es relevant ist. Ich suche einfach nach Loop und Frage ging es um DOM-Element. – Ironic

+0

Als ich das OP missverstanden habe. Die enge Abstimmung zurückziehen. – Vucko

Antwort

1

Ich würde es auf diese Weise tun (wie Sie dies nur Idee für den Code ist gefragt):

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(); 
} 
}); 

Ich hoffe, dies wird Ihnen den Start.

+0

Danke für Ihre Antwort. Abgestimmt. – Ironic

+0

Sie sind herzlich willkommen :) – Tezekiel

1

Ich habe nichts davon getestet. Aber ich hoffe, Sie verstehen das Wesentliche. Ich habe etwas in diese Richtung gefunden.

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. 
}); 
+0

Danke für Ihre Antwort. Abgestimmt – Ironic