다른 시간과 divs의 루프 클래스

Question

루프에서 다른 타이밍으로 현재 요소의 클래스를 변경해야합니다. 그냥 한 번 발생이 경우

:/

제안 들으 ??

<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

우선 요소 당 하나의 지연을 실행하므로 Interval 대신 setTimeout이 필요합니다. 둘째 - 루프를 반복하려면이 함수를 재귀 적으로 호출해야합니다. 당신을 위해 여기에 노력하고 있습니다 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(); 

Answer 2

함수를 연결하려면 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 3

당신은 두 시간은 단 하나의 insted 기능을 호출하여 해결할 수

.. & 전화는 재귀 자체 내에서, 즉

콘솔 .... 여기

을 확인할 수 있습니다

는 작업 조각입니다

$(document).ready(function(){ 
 
\t function myFunction() { 
 
\t 
 
    var current = $('.wrapper').children(".current"); 
 
    var timeOfVisible = $('.wrapper').children(".current").data("time"); 
 
\t 
 
    setInterval(function() { 
 
     current.removeClass("current").next().addClass("current"); 
 
\t \t console.log($(current)) 
 
     if ((current.next()) > $('.wrapper').children().length) { 
 
      alert(current) 
 
     } 
 
\t \t 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>