Javascript X秒后显示/隐藏不带循环的div序列

在页面加载时，我试图显示一个div1 10秒，然后隐藏它，显示

div2

3秒，然后隐藏它，然后显示最后一个div3而不隐藏它

所以我的css中有

#show1, #show2, #show3 {display: none; }

在html中

<div id="showhide">
<div id="show1">
<h2>Step 1: Checking if your area is eligible...</h2>
</div>
<div id="show2">
<h2>Success!</h2>
</div>
<div id="show3">
<h2>Just need to gather a little more information...</h2>
</div>
</div>

任何帮助都将不胜感激

将

data nextid=“show2”data showtimeout=“10”class=“hide div”style=“display:none；”“

添加到

标记中

data nextid

将显示下一个div的id

数据显示超时

将具有当前div的显示时间值

hide div

类用于将所有此类div设置为在函数调用时隐藏

style=“display:none；”“

到每个div将最初隐藏所有div

已删除CSS

#show1、#show2、#show3{display:none；}

添加了对display first div

displaydivithtimer.apply（$（'#show1'））的初始调用内部
$（文档）.ready（）


函数displaydivithtimer（）{
$（this.css（'display'，'block'）；
var timeout=$（this.attr（'data-showtimeout'）；
var nextid=$（this.attr（'data-nextid'）；
//log（“超时：+timeout+”，nextid:+nextid）；
如果（超时和下一次）{
设置超时（（）=>{
$（'.hide div'）.css（'display'，'none'）；
displaydivithtimer.apply（$（'#'+nextid））；
}，parseInt（超时）*1000）；
}  
}
$（文档）.ready（函数（）{
displayDivWithTimer.apply（$（'#show1'）；
});

步骤1：检查您的区域是否符合条件。。。
成功
只是需要收集更多的信息。。。
谢谢！我做的和你做的完全一样，由于某种原因它不会显示任何div。添加了我所做的简要说明。对代码进行了微小的更改。如果您的代码仍然无法工作，请取消对console.log行的注释并观察。我希望这会对你有所帮助。它很有效！非常感谢你。。。这是一个很大的帮助。
$(function () {

var counter = 0,
divs = $('#show1, #show2, #show3');

function showDiv () {
divs.hide() // hide all divs
.filter(function (index) { return index == counter % 3; }) // figure out correct div to show
.show('fast'); // and show it

counter++;
}; // function to loop through divs and show correct div

showDiv(); // show first div    

setInterval(function () {
showDiv(); // show next div
}, 1 * 1000); // do this every 10 seconds    

});