點擊jQuery序列事件

所以我有一個網站上的區域它會做什麼是當點擊加載一些HTML（1），然後一旦HTML（1）加載，並點擊它會加載一些更多的HTML（2）），然後一旦html（2）被加載並點擊它將加載html（3），最後一旦點擊它將轉到URL。點擊jQuery序列事件

這將如何實現？

只是一個基本的例子會幫助我開始！

什麼，我想實現：

<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>

因此，當用戶點擊#advert首次＃裂紋-1顯示;
當用戶單擊#advert或＃crack-1（如＃crack-1可見）時，將顯示＃crack-2;
當用戶單擊#advert，＃crack-1或#crack-2時，則顯示＃crack-3;
當用戶單擊#advert，＃crack-1，＃crack-2或＃crack-3時，它會轉到一個url。

來源

2011-05-16 Xavier

注意我的解決方案（進一步下跌）是無效的，應予以刪除。我對此很抱歉，但我沒有仔細閱讀這個問題。我的解決方案只適用於三個不同的內容容器，因爲$ .when中的所有內容都將同步加載。我很抱歉！ – schellmax 2011-05-16 12:22:10

沒有問題@schellmax感謝您添加此評論！ – Xavier 2011-05-16 12:25:38

這裏是一個解決方案：http://jsfiddle.net/maniator/pQaR3/

JS：

$('#advert').click(function() { 
    var self = this; 
    if (!$('#crack-1').hasClass('open')) { 
     $('#crack-1').show().addClass('open').click(function() { 
      $(self).trigger('click'); 
     }); 
    } else if (!$('#crack-2').hasClass('open')) { 
     $('#crack-2').show().addClass('open').click(function() { 
      $(self).trigger('click'); 
     }); 
    } else if (!$('#crack-3').hasClass('open')) { 
     $('#crack-3').show().addClass('open').click(function() { 
      $(self).trigger('click'); 
     }); 
    } else { 
     //follow some link 
    } 
})

來源

2011-05-16 14:40:40 Neal

如何：

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

來源

2011-05-16 15:05:57

感謝您的回答@Chris Barr，但Neal的解決方案非常完美。 – Xavier 2011-05-16 15:41:23

點擊jQuery序列事件

回答

相關問題