jQuery在单击时按顺序排列的事件

所以我在网站上有一个区域，它会做的是当点击加载一些html（1），然后一旦加载html（1），点击它会加载更多的html（2），然后一旦加载html（2），点击它会加载html（3），最后点击它会转到一个URL

这将如何实现

只要一个基本的例子就可以帮助我开始

我正在努力实现的目标：

<div id="container">

     <div id="advert">
         Click this advert to crack the screen
     </div>
     <div id="crack-1" style="display:none;z-index:1;position:absolute;"></div>
     <div id="crack-2" style="display:none;z-index:1;position:absolute;"></div>
     <div id="crack-3" style="display:none;z-index:1;position:absolute;"></div>
</div>

单击此广告可打开屏幕

因此，当用户第一次点击“广告”时，就会显示“裂纹-1”

当用户单击#广告或#裂纹-1（因为#裂纹-1可见）时，将显示#裂纹-2

当用户单击#广告、#裂纹-1或#裂纹-2时，显示#裂纹-3

当用户单击#广告、#破解-1、#破解-2或#破解-3时，它会转到一个url

以下是一个解决方案：

JS:

这个怎么样：

$("#container").children().click(function(){
    $(this).siblings(":hidden:first").show();
    if($(this).siblings(":hidden").length===0){
        //all are shown!   
    }
});

---

注意：我的解决方案（进一步向下）无效，应删除。对此我很抱歉，但我没有仔细阅读这个问题。我的解决方案只适用于三个不同的内容容器，因为$.when中的所有内容都将同步加载。我道歉！没问题@schellmax感谢您添加此评论！谢谢你的回答@Chris Barr，但Neal的解决方案非常有效。

$("#container").children().click(function(){
    $(this).siblings(":hidden:first").show();
    if($(this).siblings(":hidden").length===0){
        //all are shown!   
    }
});