Question

我正在努力使用Hilios的JQuery倒计时器，沿着laravel 5.6安装

我有生成值的div，如下所示：

<div data-countdown="{{ $data->expiration }}"></div>

生成的结果看起来就像那样：

<div data-countdown="2018-06-15 17:25:30"></div>

所以在view的文件底部，我已经用倒计时脚本实现了jQuery：

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

<script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js" type="application/javascript"></script>

<script type="application/javascript">
    $('[data-countdown]').each(function() {
       var $this = $(this);
       var finalDate = $(this).data('countdown');
       $this.countdown(finalDate, function(event) {
          $this.html(event.strftime('%D days %H:%M:%S'));
       });
     });
</script>

问题在于它根本不起作用，更糟糕的是 - 我在控制台中没有出现任何错误......

提前感谢任何建议，这可能有助于解决此问题。

Answer 1

如果您的代码单独正确运行（例如在jsfiddle上），则try-and-error或某些控制台日志可能是您的朋友。

尝试以下代码，验证控制台输出是否正确以及您的预期。如果数据属性内容正确，我可能会怀疑有关event.strftime函数的一些问题：

  <script type="application/javascript">
    $('[data-countdown]').each(function() {
      var $this = $(this);
      var finalDate = $(this).data('countdown');

      console.log('finalDate:', finalDate);

      $this.countdown(finalDate, function(event) {
        console.log('strftime output:', event.strftime('%D days %H:%M:%S'));

        $this.html(event.strftime('%D days %H:%M:%S'));
      });
    });
  </script>

Answer 2

解决了这个问题。

然而，任何人都可以轻松地完成任务，而且显而易见......

首先，我将JS代码放在@endsection下，因此它没有被加载到视图中。将代码置于@endsection之上解决了问题，因为所有的JS脚本都已加载。

Hilios倒数计时器与laravel 5.6

2 个答案: