如何将字符串分成数组中声明的新行？ Javascript/Jquery

Question

我想打破一组数组元素中的一个字符串。 输出将以时间间隔显示。 Javascript：

    <script type="text/javascript"> 
    var caption= document.getElementById('caption');
    var text=['Hey there please help me','solve the problem sleep BETTER.'];
                    function display(i){
                    if(i >= text.length){
                       i = 0;
                       }
                    caption.innerHTML = text[i];
                    setTimeout(function(){
                      display(i + 1)
                     }, 6000)

                   }
                   display(0)
     </script>

输出是：解决问题睡眠更好。 但我需要这样的东西：解决问题（在新行中） 睡得更好。

HTML：

<div class= "content" >
h1><span id="caption"> </span></h1> 
</div>

我需要用新行显示标题。

谢谢！

Answer 1

您需要追加到带有+= 的内容，而不是简单地用caption.innerHTML = text[i] 覆盖文本内容。要将solve the problem 和sleep BETTER 输出到新行，您首先需要在数组中将它们分开，然后在输出新文本之前添加HTML 换行符（<br />）：

var caption = document.getElementById('caption');
var text = ['Hey there please help me', 'solve the problem', 'sleep BETTER.'];

function display(i) {
  if (i >= text.length) {
    i = 0;
  }
  caption.innerHTML += "<br />" + text[i];
  setTimeout(function() {
    display(i + 1)
  }, 6000)
}

display(0)

<div class="content">
  <h1><span id="caption"> </span></h1>
</div>

如果您不想重复，只需在检查if (i < text.length) 的if 语句中设置功能即可：

var caption = document.getElementById('caption');
var text = ['Hey there please help me', 'solve the problem', 'sleep BETTER.'];

function display(i) {
  if (i < text.length) {
    caption.innerHTML += "<br />" + text[i];
    setTimeout(function() {
      display(i + 1)
    }, 6000)
  }
}

display(0)

<div class="content">
  <h1><span id="caption"> </span></h1>
</div>