0

私は JQUERY.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');};

});
});

「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 - テーブルです

#JobXX - カウントダウン div

#TDJobXX - 非表示にする TD/ROW です

#NoJob - アラート メッセージであり、すべての TD が非表示の場合にのみ表示されます。(仕事がない)

問題は、何千もの行があることです。行ごとにルールを作成する必要がある場合は問題になります。

次に、複数のインスタンスを操作し、カウントダウンの最後に各行を非表示にするソリューションが必要です..

何か案が？

私はJquery/JSをあまり知りません...しかし、すべてのドキュメントを読み、「シングルカウントダウン」のソリューションを作成します.. :D

4

1 に答える 1

0

slideUp()タイマーが切れた行をjQueryで非表示にすることができます。

タイマーのターゲット要素は id の div でJob1あり、これは 内にあるため、行全体を非表示に<tr>するには、 まで上に移動して.like<tr>を呼び出す必要があります。slideUp()

JS コード:

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

参照: jQuery .slideUp()

于 2015-09-07T14:24:19.397 に答える