首先,我从数据库中选择所有数据时间,但当显示到页面时,只有前一个项目会显示计时器,其他项目不能显示计时器。
<?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引起的。您的$stmtAuction->rowCount()
编号为id='countdown'
。id
应该是唯一的。因此javascript/jQuery将只找到第一个/唯一的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
}
}
?>
现在,在javascript中,您需要使用类选择器$(".countdown")
,并使用$.each()
在每个类上循环。
<script>
$('.countdown').each(function(){
$(this).countdown($(this).attr('value'), function(event) {
$(this).text(
event.strftime('%D days %H:%M:%S')
);
});
});
</script>
jsFiddle示例-https://jsfiddle.net/smh5nhgz/1/