Question

考虑以下情况：

有一系列的os div，全部都是类.step
div.step s的数量可以是3或更大。

我需要在所有.current内每隔5秒切换一次.next，.previous和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(){

    	for(var i = 0; i < steps.length; i++){
    		// if current is first
    		// first : current
    		// second : next
    		// last : previous


    		// if current is last
    		// last : current
    		// first : next
    		// last - 1 : previous

    	}
    }  

});

<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。

你当然可以改进这一点，这里还有很多东西需要改进。

使用Jquery切换多个div类

1 个答案: