JavaScriptタイマーが複数のインスタンスで動作しない

Question

以下はループの結果です。タイマーを実行して、各ループ結果の設定時間までカウントします。

<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span> 

<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span> 

<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span> 

タイマースクリプト：だからタイマーを実行するために、LaravelとjQueryを使用しています

$(document).ready(function(){ 

    $('[data-time]').each(function() { 
    console.log($(this)) 
    var $this = $(this), 
     finalTime = $(this).data('time'), 
     url  = $(this).data('url') 

    // Set the date we're counting down to 
    var countDownDate = new Date(finalTime).getTime(); 

    // Update the count down every 1 second 
    var x = setInterval(function() { 

     // Get todays date and time 
     var now = new Date().getTime(); 

     // Find the distance between now an the count down date 
     var distance = countDownDate - now; 

     // Time calculations for days, hours, minutes and seconds 
     var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
     var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
     var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
     var seconds = Math.floor((distance % (1000 * 60))/1000); 

     // Display the result in an element with id="demo" 
     document.getElementById("time").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; 

     // If the count down is finished, write some text 
     if (distance < 0) { 
     clearInterval(x); 
     document.getElementById("time").innerHTML = "EXPIRED"; 
     } 
    }, 1000); 
    }) 
}) 

。

コードが機能していないため、援助が必要です。

Answer 1

このトリックは、配列の間隔を「保存」することです。
これを実行しないと、各ループの繰り返しで上書きされます。

次に、右のspan要素を参照するには、後で.eq()メソッドで使用するために反復indexを取得する必要があります。
はループ内でidを使用できません。これは一意でなければならないためです。

コード内のコメントをご覧ください。

$(document).ready(function(){ 
 

 
    // an arrary to store the intervals created. 
 
    var timerArray = []; 
 

 
    $('[data-time]').each(function(index) { 
 
    console.log($(this).data("time")); 
 

 
    var finalTime = $(this).data('time'); 
 

 
    // Set the date we're counting down to 
 
    var countDownDate = new Date(finalTime).getTime(); 
 

 
    // Update the count down every 1 second 
 
    var x = setInterval(function() { 
 

 
     // this Index will be used to refer to the right span. 
 
     var thisIndex = index; 
 
     console.log("interval "+thisIndex); 
 

 
     // Get todays date and time 
 
     var now = new Date().getTime(); 
 

 
     // Find the distance between now an the count down date 
 
     var distance = countDownDate - now; 
 

 
     // Time calculations for days, hours, minutes and seconds 
 
     var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
 
     var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
 
     var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
 
     var seconds = Math.floor((distance % (1000 * 60))/1000); 
 

 
     // Leading zeros... 
 
     if(hours<10){hours="0"+hours} 
 
     if(minutes<10){minutes="0"+minutes} 
 
     if(seconds<10){seconds="0"+seconds} 
 

 
     // Display the result in an element with id="demo" 
 
     $('[data-time]').eq(thisIndex).html(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); 
 

 
     // If the count down is finished, write some text 
 
     if (distance < 0) { 
 
     clearInterval(timerArray[thisIndex]); 
 
     $('[data-time]').eq(thisIndex).html("EXPIRED"); 
 
     } 
 
    }, 1000); 
 

 
    // Place this timer in an array... So it won't be overwritten. 
 
    timerArray.push(x); 
 
    }) 
 
})

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

 
<span data-time="07/08/2017 12:30:00"></span><br> 
 
<br> 
 
<span data-time="07/10/2017 19:50:30"></span><br> 
 
<br> 
 
<span data-time="07/12/2017 5:24:24"></span><br> 
 
<br>

"フル・ページ" でスニペットを実行するか、このCodePenを見てください。