Jquery倒计时-隐藏多个TD

Question

我正在使用 JQUERY.COUNTDOWN - 我遇到了一个问题：

可以使用多个实例并在倒计时结束时隐藏 TABLE 行吗？

我有一个 Table，每一行都有一个 "Countdown"，如下所示：

-----------------------------------------------
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 - 是 TABLE

#JobXX - 倒计时div

#TDJobXX - 是 TD/ROW 隐藏

#NoJob - 是一条警告消息，仅在隐藏所有 TD 时出现。（没有空缺职位）

问题是我会有几千行。如果我需要为每一行创建一个规则就会有问题。

然后我需要一个解决方案来处理多个实例并在倒计时结束时隐藏每一行..

有什么想法吗？

我不太了解 Jquery/JS...但我阅读了所有文档，并为 "single countdown" 创建了解决方案。:D

Answer 1

您可以 jQuery 的 slideUp() 隐藏计时器已过期的行。

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

JS代码：

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

参考：jQuery .slideUp()

Jquery倒计时-隐藏多个TD

Jquery Countdown - Hide Multiple TD

html

javascript

css

jquery

jquery-countdown