Jquery倒计时-隐藏多个TD

Question

我正在使用JQUERY。倒计时-我有一个问题:

它可能的工作与多个实例和隐藏表行在倒计时结束?

我有一个表，每一行都有一个"倒计时"，像这样:

-----------------------------------------------
item 1     expires in 10:10:20s   [button: GO!]
-----------------------------------------------
item 2     expires in 12:20:33s   [button: GO!]
-----------------------------------------------
item 3     expires in 22:08:53s   [button: GO!]

使用:

HTML:
<div data-countdown="2016/01/01"></div>
<div data-countdown="2017/01/01"></div>
<div data-countdown="2018/01/01"></div> 
JS:
$('[data-countdown]').each(function() {
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event) {
$this.html(event.strftime('%D days %H:%M:%S'));
if (event.elapsed){
$(this).html('EXPIRED');};
});
});

我可以控制"expires in XX:XX:XXs"并将TXT更改为"EXPIRED"，但是我为每个项目设置了一个按钮"GO!"，并且这个按钮将保留。

然后，我需要隐藏所有行。

我用脚本工作，我可以用这个隐藏每一行:

 $("#Job3").countdown("2015/09/07 03:43:20", function(event) {
 var format = '%H:%M:%S';
 if(event.offset.days > 0) {
  format = '%-d day%!d ' + format;
      }
 if (event.offset.seconds > 0) { 
       $("#Panel").show();
       $("#NoJob").hide();
      }       
 $(this).text(event.strftime(format));
      if (event.elapsed){
       $(this).html('Expired');
       $("#TdJob3").hide();
      if (($('table#Panel tr:visible').length) == 1) { 
       $("#Panel").hide();
       $("#NoJob").show();
      }}
  });

#Panel - is TABLE

#JobXX -是倒计时div

#TDJobXX -是要隐藏的TD/ROW

#NoJob -是一个警告消息，只有当所有TD都被隐藏时才会出现。(没有工作)

问题是，我将有数千行…如果我需要为每一行创建一个规则，那将是一个问题。

然后我需要一个解决方案与多个实例一起工作，并在倒计时结束时隐藏每一行。

任何想法?

我不太了解Jquery/JS…但我读了所有的文档，并创建了"单一倒计时"的解决方案…: D

Answer 1

你可以用jQuery的slideUp()来隐藏那些已经过期的行

由于计时器的目标元素是id为Job1的div，它位于<tr>内部，因此您需要向上遍历直到<tr>并像这样调用slideUp()来隐藏完整的行。

JS代码:

$(this).closest('tr').slideUp();

Ref: jQuery .slideUp()