在不同时间 javascript 的 div 中循环 class

Question

我需要更改 class 当前元素，循环但时间不同。

在这种情况下它只发生一次：/

有什么建议吗？

<div class="wrapper">
    <div class="wrapper-item wrapper-item--0 current" data-time="2500">
        <div class="item"></div>
    </div>
    <div class="wrapper-item wrapper-item--1" data-time="5000">
        <div class="item"></div>
    </div>
    <div class="wrapper-item wrapper-item--0" data-time="7000">
        <div class="item"></div>
    </div>
    <div class="wrapper-item wrapper-item--0" data-time="9000">
        <div class="item"></div>
    </div>
</div>


function myFunction() {
    var current = $('.wrapper').children(".current") 
    var timeOfVisible = $('.wrapper').children(".current").data("time");
    setInterval(function() {
        current.removeClass("current").next().addClass("current");
        if ((current.next()) > $('.wrapper').children().length) {
            alert(current)
        }
    }, timeOfVisible);
}
myFunction()

Answer 1

如果要链接函数，则需要将主函数循环添加到 setInterval 的回调中。

简单的做法是：

function myFunction() {
    var current = $('.wrapper').children(".current") 
    var timeOfVisible = $('.wrapper').children(".current").data("time");
    setInterval(function() {
        current.removeClass("current").next().addClass("current");
        if ((current.next()) > $('.wrapper').children().length) {
            alert(current)
        }
        myFunction();
    }, timeOfVisible);
}

我所做的只是将函数调用 myFunction() 移动到回调内部。

Answer 2

你可以通过调用函数两次次而不是一次来解决。并递归地调用它，即在它自身内部调用它

您可以查看控制台....

这是一个工作片段

$(document).ready(function(){ 
 function myFunction() {
   
    var current = $('.wrapper').children(".current"); 
    var timeOfVisible = $('.wrapper').children(".current").data("time");
  
    setInterval(function() {
        current.removeClass("current").next().addClass("current");
  console.log($(current))
        if ((current.next()) > $('.wrapper').children().length) {
            alert(current)
        }
  myFunction()
    }, timeOfVisible);
}
myFunction();
});

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



<div class="wrapper">
    <div class="wrapper-item wrapper-item--0 current" data-time="2500">
        <div class="item">0</div>
    </div>
    <div class="wrapper-item wrapper-item--1" data-time="5000">
        <div class="item">1</div>
    </div>
    <div class="wrapper-item wrapper-item--0" data-time="7000">
        <div class="item">2</div>
    </div>
    <div class="wrapper-item wrapper-item--0" data-time="9000">
        <div class="item">3</div>
    </div>
</div>

Answer 3

首先，您将需要 setTimeout 而不是 Interval，因为您将运行每个元素延迟一次。其次 - 你需要递归地调用你的函数才能在循环中重复。这是为你工作的 js:

function changeClass() {
  var current = $('.wrapper .wrapper-item.current');
  if(current.length > 0) {
     var timeOfVisible = current.data("time");
     setTimeout(function(){
    current.removeClass('current');
    if (current.next().length > 0)
        current.next().addClass('current');
    else
      $('.wrapper .wrapper-item').first().addClass('current');
      changeClass();
  }, timeOfVisible); 
  }
};

changeClass();

Codepen 示例 here.

此外，如果您不想无限循环，请改用此方法：

function changeClass() {
  var current = $('.wrapper .wrapper-item.current');
  if(current.length > 0) {
     var timeOfVisible = current.data("time");
     setTimeout(function(){
    current.removeClass('current');
    if (current.next().length > 0) {
      current.next().addClass('current');
      changeClass(); 
    }
  }, timeOfVisible); 
  }
};

changeClass();

在不同时间 javascript 的 div 中循环 class

loop class in divs with different time javascript

javascript

class

loops

setinterval

timing