使用jQuery切换多个div类

Vinicius Santana 发表于 Dev

维尼修斯·桑塔纳（Vinicius Santana）

考虑以下情形：

有一系列的os div，所有的类 .step
div.steps的数量可以为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(){

    	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>

阿德里安

你可以只分配的值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");
}

检查这个小提琴。

您当然可以改进这一点，这里还有太多需要改进的地方。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。