每30秒用一个div替换一个div [英] Replace a div with another div every 30 seconds

问题描述

我的代码：

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

我想要下面的div，替换上面的div，每30秒。即上面的div显示30秒，然后下面的div显示30秒，然后回到上面的div 30秒，依此类推....

I want the below div, to replace the above div, every 30 seconds. i.e. Above div displays for 30 seconds, then the below div displays for 30 seconds, then back to the above div for 30 seconds, and so on....

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

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

I know how to do this onclick -

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

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

But I do not know how to automate this to change every 30 seconds?

推荐答案

您可以使用：

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秒钟切换

Working Demo with 3 seconds toggling

这篇关于每30秒用一个div替换一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！