переключая несколько дивы классов с Jquery

Question

Учитывая следующий сценарий:

• Есть ряд ОС дивы, все с классом .step
• Количество div.step с может быть 3 или больше.

мне нужно переключить классы .current, .next и .previous каждые 5 секунд, в течение всего в div.step. Всегда должен быть один .current, один .next и один .previous.

Если .current является первым, вторым будет .next и последним .previous.

Если .current является последним, первым будет .previous, а первым будет .next.

В противном случае они всегда будут в порядке .previous, .current и .next.

У меня возникли проблемы с этим кодом. Просьба предоставить помощь или идеи.

$(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

Вы можете просто выделить значения current, previous и next переменной и увеличиваем тех, кто в setInterval метод, а затем, если он превысил количество шагов, в то время как Инкрементирование, присвоить его с 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"); 
} 

Проверьте это fiddle.

Возможно, вы, конечно, улучшите это, здесь слишком много вещей для улучшения.