每30秒將div替換為另一個div

Question

我的代碼：

<div class="employee">
<div class="text">Number of Employees</div>
<div class="number">50</div>
</div>

我希望下面的div每30秒替換一次上面的div。 例如，上方div顯示30秒，然后下方div顯示30秒，然后返回上方div 30秒，依此類推。

<div class="recruit">
<div class="text">Recruiting</div>
<div class="number">1</div>
</div>

我知道如何在onclick上執行此操作-

$( ".employee" ).click(function() {
$( this ).replaceWith( "<div class="recruit"><div class="text">Recruiting</div><div class="number">1</div></div>" );
});

但是我不知道如何自動每30秒更改一次？

Answer 1

您可以使用：

setInterval(function(){
   if($('.employee').length)
      $('.employee').replaceWith( '<div class="recruit"><div class="text">Recruiting</div><div class="number">1</div></div>' );
    else
      $('.recruit').replaceWith( '<div class="employee"><div class="text">Number of Employees</div><div class="number">50</div></div>' );
},30000);

3秒切換顯示工作演示