Paginieren Arrays Javascript von Klick

Question

i haben zwei Verbindungen:

<a href="#" id="theone" data-do="1" class="loopit">loop it</a> 
<a href="#" id="thetwo" data-do="2" class="loopit">loop it 2</a> 

dann auf Klick abfeuern i eine Funktion, die ein Array-Schleifen. es funktioniert gut, wenn es eine Schleife aber vermasseln ist, wenn es mehr ist, in diesem Beispiel zwei .:

var jsonArray = ["one","two","three","four","five","six","seven","eight","nine","ten","eleven","twelve"]; 
var jsonArray2 = ["january","fabruar","march","april","may","june","july","august","september","october","november","december"]; 
var current_group = 0; 
var group_size= 5; 
var group_size2= 2; 
var theskip; 
function cycleArray(thearr,thesize) { 
var current_items = thearr.slice(current_group, current_group + thesize); 
var skip = current_group += thesize; 

console.log(current_items); 
console.log(skip); 

if(current_group > thearr.length) { 
    console.log("no more"); 
/* then we stop! no more items, so maybe disable button etc */ 
} 
} 

$(".loopit").on("click", function(e){ 
e.preventDefault(); 
var theclicked = $(this).attr("data-do"); 

//alert(theclicked); 
if (theclicked == "1") { 
    cycleArray(jsonArray,group_size); 
}else{ 
    cycleArray(jsonArray2,group_size2); 
} 

}); 

so das Problem ist der Sprung Teil. es speichert die letzte, die entscheidend ist, aber wenn ich den ersten Link gedrückt habe, bekomme ich die ersten 5, aber dann, wenn ich den zweiten Link drücke, bekomme ich von der rechten Reihe zwei Ergebnisse (groß) ABER offensichtlich beginnen sie von der Fünftens, und nicht der Anfang.

wie kann ich es tun?

freundlichen Grüßen

Answer 1

Das Problem ist, dass man für beide Arrays Spur von current_group mit derselben Variablen halten. Wenn Sie also auf die erste Schaltfläche mit der Größe 5 klicken, wird die current_group var auf 5 gesetzt und so beginnt der nächste Aufruf von cycleArray für arrayJson2 an Position 5.

In JavaScript können Sie Arrays wie Objekte behandeln und ihnen Eigenschaften zuweisen, also a bessere Lösung wäre, current_group wie folgt zu verfolgen:

var jsonArray = ["one","two","three","four","five","six","seven","eight","nine","ten","eleven","twelve"]; 
var jsonArray2 = ["january","fabruar","march","april","may","june","july","august","september","october","november","december"]; 

// Here initialize them with zero 
jsonArray2.current_group = 0; 
jsonArray.current_group = 0; 

var current_group = 0; 
var group_size= 5; 
var group_size2= 2; 
var theskip; 
function cycleArray(thearr,thesize) { 
// now you can sefely access the property coresponding the correct array 
var current_items = thearr.slice(thearr.current_group, thearr.current_group + thesize); 
var skip = thearr.current_group += thesize; 

console.log(current_items); 
console.log(skip); 

if(thearr.current_group > thearr.length) { 
    console.log("no more"); 
/* then we stop! no more items, so maybe disable button etc */ 
} 
}