Question

我在stackover-flow上搜索了我的问题，但无法得到合适的答案。我有一个由我的后端代码循环生成的框。这个盒子在单个盒子倒计时后会被破坏。时间框架一起提供，框的内容形成后端。现在取决于我的后端代码的结果，根据具体情况，框可以是10或100万。所以我在循环中对它们中的每一个运行了一个jquery倒数计时器。问题是第一个盒子的倒计时用在所有其余的盒子上，所以当第一个盒子的计时器结束时，销毁命令会影响所有盒子。

下面是使用laravel blade语法进行操作的示例。

    @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

现在这就是循环。那些从我的数据库中获取的数据。

count-timer文件使用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>

所以现在又出现了问题，第一个盒子的倒计时是在所有盒子上使用，即使计时器不同我想让计时器在每个盒子上运行。再次，在所有方框上重复第一个的定时器功能，而来自循环的时间不同。当你查看它时，你会看到一个非常错误的统一时间。请有人帮我解决。

现在我知道问题是该函数只运行一次，所以如何根据循环次数多次调用它。

Answer 1

我找到了问题的解决方案，我要做的是使用每个j-query循环框。我在问这个问题之前最初做过但是我正在连接每个函数的倒计时，直到我看到多个实例的倒数计时器的文档。他们仍然使用每个循环，但是没有将倒计时obj连接到它。 Link to the answer of my question

Answer 2

我认为如果实现你的问题的答案，它应该看起来像这样。

$（'div＃timer'）。each（function（）{

        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'
              })
          })

            } 
          })
        }
         });
      });

如何在具有相同类名

2 个答案: