別のdivで同じクラス名でjavascriptタイマーを実行する方法

Question

---

私の質問については、スタックオーバーフローで検索しましたが、適切な答えを得ることができませんでした。バックエンドコードからループによって生成されたボックスがあります。このボックスは、個々のボックスのカウントダウン後に破壊されます。タイムフレームは、バックエンドを形成するボックスの内容と一緒に側方に供給される。私のバックエンドコードの結果に応じて、ケースは10または100万になることがあります。だから私はループ内のそれぞれの上にjqueryのカウントダウンタイマーを走らせた。問題は、最初のボックスのカウントダウンがすべての残りのボックスで使用されていることです。したがって、最初のタイマーが終了すると、破壊コマンドはすべてのボックスに影響します。

以下は、laravelブレード構文を使用していることの例です。

@forelse($boxe_deatails as $box_detail) 

    <div class="box-v2-detail-o"> 
    <div class="col-md-16 col-xs-6 pull-right" style="background: rgba(110, 151, 170, 0.57);min-width: 100%;min-height: 73px;float: right;padding: 10px;font-size: small;line-height: 2em;margin: 5px;"> 
    Timer to Run 
    <div id="timer"> 
    @include('partials/count-timer') 
    </div> 
    </div> 
    <img style="width: 60px;height: 60px;border: 3px solid #fff;" src="{{asset('asset/img/avatar.jpg')}}" class="img-responsive"/> 
    <h4>Name {{$box_detail->name}} </h4> 
    <big>Size {{ $box_detail->size}} </big> 
    </div> 
@empty 
hello Empty 
@endforelse 

これがループです。それらのデータは私のデータベースから取得されます。

カウントタイマーファイルはjquery.countdown-2.2.0 を使用していますので、対象となるDOM要素を選択してタイマーアニメーションを実行するだけです。

<script type="text/javascript"> 
    $('body').find("div#timer").countdown('{{$box_detail->created_at->addHours(13)}}', {elapse:true}).on('update.countdown', function(event) { 
    $(this).text(event.strftime('%H Hr(s) : %M Min(s) : %S Sec(s)')); 
    if (event.elapsed) { 
     $.ajax({ 
     url  : '{{url('/timer-delete-box/'.$box_detail->id)}}', 
     method : 'get', 
     success : function(response) 
     { 
      alertify.notify('You did not make your payment before time. So your account has been pause', 'error', 9) 

     } 
     }) 
    } 
    }); 
</script> 

は今の問題は、再び最初のボックスのダウンカウントタイマは、私はタイマーは、各ボックス上で実行したい異なるがあってもすべてのボックス上での使用があるということです。ループの時間が異なるのに対して、最初のループのタイマ機能はすべてのボックスで繰り返されます。あなたがそれを見ると、非常に間違っている一様な時間が見えます。誰かがそれを解決するのを助けてください。

ここで問題は、関数が1回だけ実行されているので、ループ回数に基づいて複数回呼び出す方法です。

Answer 1

あなたの質問への回答を実装すると、このように見えるはずです。

$（ 'DIV＃1タイマー'）それぞれ（関数（）{

 var $this = $(this), 

      finalDate = '{{$box_detail->created_at->addHours(13)}}'; 

      $this.countdown(finalDate, {elapse:true}).on('update.countdown', function(event) { 

      $this.text(event.strftime('%H Hr(s) : %M Min(s) : %S Sec(s)')); 
      if (event.elapsed) { 
      $.ajax({ 
      url  : '{{url('/time-pause-account/'.$Topay->id)}}', 
      method : 'get', 
      success : function(response) 
      { 
       alertify.notify('You did not make your payment before time. So your account has been pause', 'error', 9, function(){ 
        $('body').css({ 
         'opacity' : '0', 
         'transition' : 'all 1s' 
        }) 
       $('body').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
       window.location = 'home' 
       }) 
      }) 

      } 
      }) 
     } 
     }); 
     }); 

Answer 2

私は問題を解決するために、ボックスにそれぞれのj-queryループを使用する必要があります。私は最初にこの質問をする前に私は複数のインスタンスのカウントダウンタイマーのドキュメントを見てまで、私は各機能にカウントダウンを連結していた。彼らはまだ各ループを使用しますが、countdown objを連結しませんでした。 Link to the answer of my question