Javascript 如何在php中显示多个倒计时计时器

首先，我从数据库中选择了所有数据时间，但当显示到页面时，只有前一项显示计时器，其他项不能显示计时器

 <?php
     $stmtAuction = $db->prepare("SELECT * FROM auction WHERE expired_at >= CURDATE() AND status = 'available' ORDER BY expired_at ASC");
                    $stmtAuction->execute();
     if ($stmtAuction->rowCount() > 0) {
                        while ($item = $stmtAuction->fetch()) {
       ?>
          <span id='countdown' value='<?php echo $item['expired_at'];?>'></span>       

<?php
}
?>
    <script>

     $("#countdown").countdown($('#countdown').attr('value'), function(event) {
                $(this).text(
                    event.strftime('%D days %H:%M:%S')
                );
            });
    </script>

---

您的问题是由非唯一的
id
s引起的。您有
$stmtAction->rowCount（）
的
id='countdown'
个数<代码>id

应该是唯一的。因此javascript/jQuery只能找到第一个/unique

id='countdown'

。您需要改用

class='countdown'

-

<?php
    $stmtAuction = $db->prepare("SELECT * FROM auction WHERE expired_at >= CURDATE() AND status = 'available' ORDER BY expired_at ASC");
    $stmtAuction->execute();
    if ($stmtAuction->rowCount() > 0) {
        while ($item = $stmtAuction->fetch()) {
        ?>
            <span class='countdown' value='<?php echo $item['expired_at'];?>'></span>
                  ^^^^^-change from id to class
<?php
        }
    }
    ?>

---

a

您有

$stmtAction->rowCount（）

的编号

id='countdown'

<代码>id应该是唯一的。因此javascript/jQuery只能找到第一个/unique

id='countdown'

。您需要使用

class='countdown'

和

$（“.countdown”）

，尽管您需要进行一些额外的更改才能使其工作。它可以工作…但所有计时器显示相同的时间和日期如何根据数据库选择显示计时器？添加了一个答案，显示从

id

更改为

类

，以及如何使用

$（“.countdown”）

和

$.each（）

来显示每个计时器数据。嗨，肖恩，为什么我把今天的日期作为例子，

value='2016/01/05 05:00:00'

，然后倒计时变成00天00:00:00…如何解决它？

<script>
    $('.countdown').each(function(){
        $(this).countdown($(this).attr('value'), function(event) {
            $(this).text(
                event.strftime('%D days %H:%M:%S')
            );
        });
    });
</script>