根据点火器中的间隔时间逐个显示 div

Question

大家好，我正试图根据为特定内容设置的间隔时间，在div中逐个显示我的内容数据。

我的要求是我有一个组，该组包含多个内容，如文本、图像或视频。例如，如果我在一个组中添加了3个内容，这三个内容需要运行一个b，这取决于它们的特定间隔时间。我为每个内容设置了时间，如30秒、40秒、50秒现在，在我的代码中，所有3个div都显示在同一页面上，间隔时间也不起作用

有谁能帮我解决这个问题吗。

这是我的查看页面代码：

<!--Display Dynamic Content-->
<div class="container">
<h2>Text Content</h2>
<?php
if (!empty($displaycontent)) {
foreach ($displaycontent as $content) {
$time = $content->displaytime;
$typeofinfo = $content->typeofinfo;
$content = $content->details;
$seconds = strtotime("1970-01-01 $time UTC");
$miliseconds = $seconds * 1000;
echo $seconds . "n" . $miliseconds; 
if ($typeofinfo == '2') {
?>
<div id="pageContent" class="panel panel-default">
<div class="panel-body">
<?php echo $content; ?>
</div>
</div>
<?php
} elseif ($typeofinfo == '8') {
?>
<div id="pageContent" class="panel panel-default">
<div class="panel-body">
<img src="<?=site_url('new/'.$content); ?>">
</div>
</div>
<?php
} elseif ($typeofinfo == '6') {
?>
<div id="pageContent" class="panel panel-default">
<div class="panel-body">
<video width="400" controls>
<source src="<?=site_url('new/'.$content); ?>" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<?php
}
}
}
?> 
</div>

<script>
var inputTime=<?php echo $miliseconds;?>;
window.onload=function()
{
setTimeout(hidePage, inputTime);
};
function hidePage()
{
$("#pageContent").show();
}
</script>

提前谢谢。

Answer 1

您有重复的ID:pageContent。更改为类或添加最后一个数字，如：pageContent1、pageContent2、pageContent3

setTimeout设置一个计时器，该计时器在计时器到期后执行一次函数或指定的代码。因此，为了完成任务，您需要再次执行setTimeout。

将pageContent更改为类您的js将是：

document.addEventListener("DOMContentLoaded", function(event) {
$(".pageContent").hide();
var timeout = $(".pageContent").first().data('timeout');
setTimeout(hidePage, timeout, $(".pageContent"));
});
function hidePage(eles) {
if (eles.length>0) {
$(".pageContent").hide();
eles.first().show();
eles = eles.slice(1);
var timeout = eles.first().data('timeout') || 0;
setTimeout(hidePage, timeout, eles);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Display Dynamic Content-->
<div class="container">
<h2>Text Content</h2>
<div class="pageContent panel panel-default" data-timeout="<?php echo $miliseconds;?>">
<div class="panel-body">
content1
</div>
</div>
<div class="pageContent panel panel-default" data-timeout="<?php echo $miliseconds;?>">
<div class="panel-body">
content2
</div>
</div>
<div class="pageContent panel panel-default" data-timeout="<?php echo $miliseconds;?>">
<div class="panel-body">
content3
</div>
</div>
</div>