将回调结束函数添加到jQuery Final Countdown的多个实例中

时间:2014-04-02 15:48:42

标签: jquery

我正在尝试整合jQuery Final Countdown,因为看起来多实例能力是系统要求最低的。

示例代码显示:

<div data-countdown="2020/01/01"></div>
<div data-countdown="2019/01/01"></div>
<div data-countdown="2018/01/01"></div>
<div data-countdown="2017/01/01"></div>

<script>
$('[data-countdown]').each(function() {
 var $this = $(this), finalDate = $(this).data('countdown');
 $this.countdown(finalDate, function(event) {    
     $this.html(event.strftime(''
     + '<span>%w</span> weeks '
     + '<span>%d</span> days '
     + '<span>%H</span> hr '
     + '<span>%M</span> min '
     + '<span>%S</span> sec')); 
 });    
});
</script>

但是回调功能的例子如下:

<div id="clock"></div>

$('#clock').countdown('2020/10/10 12:34:56')
 .on('update.countdown', function(event) {
     var format = '%H:%M:%S';
     if(event.offset.days > 0) {
         format = '%-d day%!d ' + format;
     }
     if(event.offset.weeks > 0) {
         format = '%-w week%!w ' + format;
     }
     $(this).html(event.strftime(format));
 })
 .on('finish.countdown', function(event) {
     $(this).parent()
         .addClass('ending')
         .html('<strong>This offer has expired!</strong>');
 });

我想要做的是将.on完成回调添加到多个实例(div data-countdown)但是我尝试添加它不起作用的事件并且倒计时从屏幕上消失。

如何将完成回调添加到$('[data-countdown]')。each(function()?

感谢任何帮助人员

2 个答案:

答案 0 :(得分:6)

我不得不说伙计们,我对“社区”感到非常失望。这是我最近提出的第三个问题,没有得到任何反馈或者最终找到解决方案......

它不会打败这个应该是什么的对象吗?即无论我们的能力和技能水平如何,我们都互相帮助?

嗯......无论如何......如果你只是在获得了你的电话评级之后...但请记住......我们大多数人都在寻求帮助。

所以...因为有一天别人会遇到我遇到的确切问题......这是解决方案......经过几个小时的拔毛。

添加

$this.on('finish.countdown', function(event) {
     $(this).parent()
         //.addClass('disabled')
         .html('Example Callback text or add an alert or function up to you');

在最后}}之前;每个函数和回调都应用于倒计时的每个实例。

我真的希望这可以帮助将来的某个人并节省他们用来解决它的时间。

答案 1 :(得分:-1)

  $('[data-countdown]').each(function() {
  var $this = $(this), finalDate = $(this).data('countdown');

  $this.countdown(finalDate)
  $this.on('update.countdown', function(event){
    $this.html(event.strftime('%H:%M:%S'));
  });
  $this.on('finish.countdown', function(event){
    alert("teste");
  });
});