當div顯示時JQuery運行一個函數

Question

我想在div顯示時運行一個函數。

HTML：

<div id="holder"> 
    <div id="main1" class="container-fluid"> 
     <h1>Header 1</h1> 
     <div class="btn btn-default pull-right" onclick="show('main2');">Next</div> 
    </div> 
    <div id="main2" class="container-fluid" style="display:none;"> 
     <h1>Header 2</h1> 
     <div class="btn btn-default pull-right" onclick="show('main3');">Next</div> 
    </div> 
    <div id="main3" class="container-fluid" style="display:none;"> 
     <h1>Header 3</h1> 
    </div> 
</div> 

JS：

function show(elementID) { 
    var ele = document.getElementById(elementID); 
    if (!ele) { 
     alert("no such element"); 
     return; 
    } 

    var pages = document.getElementsByClassName('container-fluid'); 
    for (var i = 0; i < pages.length; i++) { 
     pages[i].style.display = 'none'; 
    } 

    ele.style.display = 'block'; 
} 

我想運行時函數我#main3節目。該功能是設置一個定時器，使其在顯示#main3 10秒後顯示#main1。

現在如何檢測我的#main3何時顯示？

Answer 1

既然你已經使用jQuery的標籤，你可以使用一個jQuery的解決方案中，我們可以看到當前的標籤是否是，如果這樣的話使用計時器顯示的第一個像

jQuery(function($) { 
 
    $('#holder .nxt').click(function() { 
 
    var $parent = $(this).parent(); 
 
    var $next = $parent.hide().next().show(); 
 
    if ($next.is(':last-child')) { 
 
     setTimeout(function() { 
 
     $next.hide().siblings().first().show(); 
 
     }, 2500) 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="holder"> 
 
    <div id="main1" class="container-fluid"> 
 
    <h1>Header 1</h1> 
 
    <div class="btn btn-default pull-right nxt">Next</div> 
 
    </div> 
 
    <div id="main2" class="container-fluid" style="display:none;"> 
 
    <h1>Header 2</h1> 
 
    <div class="btn btn-default pull-right nxt">Next</div> 
 
    </div> 
 
    <div id="main3" class="container-fluid" style="display:none;"> 
 
    <h1>Header 3</h1> 
 
    </div> 
 
</div>

最後一個

Answer 2

您可以檢查elementID，如果是main3，然後設置setTimeout 10000毫秒（10秒）和線ele.style.display = 'block';後調用show('main1')在超時如下：

function show(elementID) { 
    var ele = document.getElementById(elementID); 
    if (!ele) { 
     alert("no such element"); 
     return; 
    } 

    var pages = document.getElementsByClassName('container-fluid'); 
    for(var i = 0; i < pages.length; i++) { 
     pages[i].style.display = 'none'; 
    } 

    ele.style.display = 'block'; 

    if(elementID == "main3"){ 
     setTimeout(function(){ show("main1"); }, 10000); 
    } 
} 

DEMO

Answer 3

在此之後

：

ele.style.display = 'block'; 

，你可以有這樣一個檢查：

ele.style.display = 'block'; 
if(ele.id === "main3"){ 
    // call it here. 
} 

Answer 4

function show(elementID) { 
var ele = document.getElementById(elementID); 
if (!ele) { 
    alert("no such element"); 
    return; 
} 

var pages = document.getElementsByClassName('container-fluid'); 
for(var i = 0; i < pages.length; i++) { 
    pages[i].style.display = 'none'; 
} 

ele.style.display = 'block'; 
if(elementID=='main3'){ 

yourFunction();// call your function here! 

} 
}