Makel mehr divs Klassen mit JQuery

Question

Unter Berücksichtigung des folgenden Szenario:

• Es gibt eine Reihe o divs, die alle mit der Klasse .step
• Die Menge an div.step s 3 sein kann oder mehr.

Ich brauche die Klassen .current, .next und .previous alle 5 Sekunden in allen div.step zu wechseln. Es muss immer eine .current, eine .next und eine .previous sein.

Wenn .current der erste ist, wird der zweite .next und der letzte .previous sein.

Wenn .current der letzte ist, wird der vorherige .previous und der erste wird .next sein.

Ansonsten sind sie immer in der Reihenfolge .previous, .current und .next.

Ich habe Probleme mit diesem Code. Bitte geben Sie Hilfe oder Ideen.

$(document).ready(function(){ 
 
    
 
    // Initial Setup 
 
    $(".step:nth-of-type(1)").addClass("current"); 
 
    $(".step:nth-of-type(2)").addClass("next"); 
 
    $(".step:last-of-type").addClass("previous"); 
 

 
    var steps = $(".step"); 
 

 
    setInterval(changeClasses, 5000); 
 
    
 
    
 
    function changeClasses(){ 
 

 
    \t for(var i = 0; i < steps.length; i++){ 
 
    \t \t // if current is first 
 
    \t \t // first : current 
 
    \t \t // second : next 
 
    \t \t // last : previous 
 

 

 
    \t \t // if current is last 
 
    \t \t // last : current 
 
    \t \t // first : next 
 
    \t \t // last - 1 : previous 
 

 
    \t } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section class="steps-wrapper"> 
 
    <div class="step">Step 1</div> 
 
    <div class="step">Step 2</div> 
 
    <div class="step">Step 3</div> 
 
    <div class="step">Step 4</div> 
 
    <div class="step">Step 5</div> 
 
</section>

Answer 1

können Sie ordnen nur die Werte von current, previous und next zu einer Variablen und die in der setInterval Methode inkrementieren, dann, wenn es die Anzahl der Schritte überschritten, während Inkrementieren, Zuweisen mit 0.

var steps = $(".step"); 
var numSteps = steps.length; 
var current = 0; 
var next = 1; 
var previous = numSteps - 1; 

setInterval(changeClasses, 300);  

function changeClasses(){ 
    //increment the positions 
    current = current === numSteps - 1 ? 0 : ++current; 
    next = next === numSteps - 1 ? 0 : ++next; 
    previous = previous === numSteps - 1 ? 0 : ++previous; 

    //remove the classes 
    steps.removeClass("current").removeClass("next").removeClass("previous"); 

    //add the classes 
    $(steps[current]).addClass("current"); 
    $(steps[next]).addClass("next"); 
    $(steps[previous]).addClass("previous"); 
} 

Überprüfen Sie diese fiddle.

Sie könnten natürlich dieses hier verbessern, es gibt zu viele Dinge, die hier verbessert werden können.