javascript - 如何在此脚本中添加更多标题？

Question

Javascript/Jquery 专家，

我有这个脚本。

$(document).ready(function() {
    var f = document.getElementById('doom');
    setInterval(function() {
        f.style.display = (f.style.display == 'none' ? '' : 'none');
    }, 1000); 

});

<div id="doom">1st Title</div>

这是它的 fiddle :

问题:如果您看到上面的脚本，它只闪烁1st Title，现在我想在 html 代码中添加至少 5 个标题它应该一一显示。

像这样的序列:

1st title
2nd title
3rd title
4th title
5th title

它应该以同样的闪烁方式一一显示。也请分享 fiddle 示例谢谢。

Answer 1

请记住，如果您使用的是 jQuery，则无需执行 document.getElementById 即可访问该元素。你可以直接说 $("#myID")。这是我的解决方案。希望对您有所帮助:)

$(document).ready(function(){
   var str = "";
   var number = 1;
   var timer = setInterval(function() {
   	 if(number == 1){str = "professional designer"}
   	 else if(number == 2){str = "professional business speaker"}
   	 else if(number == 3){str = "professional marketer"}
   	 else if(number == 4){str = "professional SEO consultant"}	
     $("#test").html("<div>"+ str+"</div>").fadeTo(100, 0.1).fadeTo(200, 1.0);
     ++number;
     $("#doom").remove();
     if(number == 5){
     clearInterval(timer);
     }
    }, 1000); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id = "test">
<div id="doom">professional blogger</div>
</div>