Gehe durch Array basierend auf dem vorherigen Wert

Question

Ich habe ein Array ['green', 'red', 'yellow', 'blue'].

Ich möchte die Hintergrundfarbe meiner Website mit diesen Farben ändern. Aber ich möchte nicht einfach eine zufällige Farbe von diesem Array nehmen. Ich möchte es der Reihe nach wiederholen.

Also, wenn ich die Hintergrundfarbe meiner Website mit getBgColor() bekommen und er druckt red, dann möchte ich eine Funktion setBgColor(currentColor)yellow zu drucken. Wie mache ich das?

Ich denke, ich sollte

function setBgColor(currentColor) { 
    var array = ['green', 'red', 'yellow', 'blue']; 

    newColor = array[array.indexOf(currentColor) + 1]; 
} 

wie

etwas tun, aber dann ist dies der richtige Ansatz? Und wie stelle ich sicher, dass ich von Blau zu Grün gehe und die Länge des Arrays nicht überschreite?

Answer 1

Sie könnten modulo% mit der Länge des Arrays verwenden.

function setBgColor(currentColor) { 
    var array = ['green', 'red', 'yellow', 'blue'], 
     newColor = array[(array.indexOf(currentColor) + 1) % array.length ]; 
    // set the new color 
    // ... 
} 

Answer 2

sind nur ein bedingter in Ihrer Nummer hinzuzufügen:

var array = ['green', 'red', 'yellow', 'blue'], 
    last_index = array.length - 1, 
    thisIndex = array.indexOf(currentColor); 

return array[thisIndex + (thisIndex !== last_index ? 1 : (-1 * last_index))]; 

Answer 3

eine Variable verwenden, die den aktuellen Index enthält, anstatt in dem Array für die Farbe zu suchen. Verwenden Sie modulare Arithmetik, um den Index zu erhöhen und um die Array-Größe zu wickeln.

var colorIndex = 0; 
var colorArray = ['green', 'red', 'yellow', 'blue']; 

function setBgColor() { 
    colorIndex = (colorIndex + 1) % array.length; 
    return colorArray[colorIndex]; 
}