jquery多倒计时.each()函数答案

【问题标题】：Jquery multi-countdown .each() functionjquery多倒计时.each()函数
【发布时间】：2023-04-10 19:40:01
【问题描述】：

我正在尝试在页面上进行多次倒计时，如下所示：

<table>  
  <tr id="4236377487">
    <td class="remain"></td>
    <td>Something</td>
  </tr>
  <tr id="768769080">
    <td class="remain"></td>
    <td>Something else</td>
  </tr>
</table>

倒计时必须放在：

<td class="remain"><!-- countdown --></td>

每个倒计时都从行 ID 值开始。这是我的代码，但它不起作用：

$(document).ready(function(){  
  $('.remain').each(function () {
     var count = $(this).attr("id");
     countdown = setInterval(function(){
     $(this).html(count + " seconds remaining!");
     if (count == 0) {
       //do something
     }
     count--; 
     }, 1000);
  });  
});

感谢您的帮助:)

法比恩

【问题讨论】：

var count = $(this).attr("id");正在查看 .remain 而不是父 tr id。
我认为你的整体设计很糟糕。即使您使用 parent 获取正确的 id，您仍然会根据它的值进行更新，并且计时器实际上永远不会减少，因为 id 始终是恒定的。

标签： jquery countdown each

【解决方案1】：

$(document).ready(function(){  
  $('tr[id]').each(function () {
     var $this = $(this);
     var count = parseInt($this.attr("id"));
     countdown = setInterval(function(){
         $('.remain', $this).html(count + " seconds remaining!");
         if (count-- == 0) {
           //do something
           clearInterval(countdown);
         }
     }, 1000);
  });  
});

在这里试试：http://jsfiddle.net/moeishaa/PwG45/

【讨论】：