Question

我试图在我的标签内每隔几秒钟显示一个新的字幕。这是我的代码：

 $( document ).ready(function() {
       var message = ['Hello Molly','Hello Lolly','Hello Dolly'];
       
       for(var i = 0; i < message.length; i++){
           setInterval(
               $('#changed-title').text(message[i]),
               1000
           );
       }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="header">
         <div class="container">
             <div class="row">
                 <div class="col-md-6 wow bounceInLeft navbar-right">
                     <h1 class="navbar-right">Hello world</h1>
                     <h2 class="navbar-right">I wanna get off</h2>
                     <button class="btn btn-lg btn-primary navbar-right">More Info</button>
    
                 </div>
    
             </div>
         </div>
     </div>

它只显示'Hello Dolly'。基本上我希望数组中的值每隔几秒就会改变一次。我怎样才能实现它？

Answer 1

$( document ).ready(function() {
  var messages = ['Hello Molly','Hello Lolly','Hello Dolly'];
  var index = -1;
  var $changedTitle = $('#changed-title');
  
  setInterval(function(){
    //get the message at the next index, modding by the length so it wraps
    var message = messages[++index % messages.length];
    $changedTitle.text(message);
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="header">
         <div class="container">
             <div class="row">
                 <div class="col-md-6 wow bounceInLeft navbar-right">
                     <h1 class="navbar-right">Hello world</h1>
                     <h2 class="navbar-right" id="changed-title">I wanna get off</h2>
                     <button class="btn btn-lg btn-primary navbar-right">More Info</button>
    
                 </div>
    
             </div>
         </div>
     </div>

Answer 2

我不确定你想把它放在哪里，因为实际上并没有id＆＃34;更改标题＆＃34;在您的HTML中，但是，根据您在其他答案中的评论，我假设您想要h2元素中的更改，因此我使用id更新了它。

此外，我修复了你的setInterval代码以包含计数器的递增，因为它必须发生在间隔的一侧，以便与它保持同步。

我还在代码中添加了一些其他的小效率。。。应该现在正在工作。

＆＃13;

$(document).ready(function() {
  var targetElement = $('#changed-title');
  var message = ['Hello Molly', 'Hello Lolly', 'Hello Dolly'];
  var maxIndex = message.length - 1;
  var currentIndex = 0;

  setInterval(function() {
    targetElement.text(message[currentIndex]);
    currentIndex = (currentIndex === maxIndex) ? 0 : currentIndex + 1;
  }, 1000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-6 wow bounceInLeft navbar-right">
        <h1 class="navbar-right">Hello world</h1>
        <h2 class="navbar-right" id="changed-title">I wanna get off</h2>
        <button class="btn btn-lg btn-primary navbar-right">More Info</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

使用for循环更改标题

2 个答案: