異なる時刻のdivのループクラス

Question

ループ内の現在の要素のクラスを異なるタイミングで変更する必要があります。

この場合、1回だけ発生します。/

任意の提案thx ??

<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

まず、要素ごとに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

関数をチェーンする場合は、main関数ループを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

あなたはTWO回&あなたがコンソールをチェックすることができ、再帰的にすなわちそれ自体の中

それを呼び出す...ただ一つの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>