Question

Javascript / Jquery Expert，

我有这个脚本。

$(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：

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

喜欢这个序列：

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

它应该以相同的闪烁逐个显示。请分享小提琴示例谢谢。

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>

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

1 个答案: