0

我正在尝试制作一个消息框，它将显示活动消息，一次来自 MySQL 表。我不知道会有多少 div，因为它可以是我的数据库中任意数量的活动消息。现在我已经通过 ajax 计时器和 php 脚本打印出我需要的 div，该计时器每 20 秒不断查询数据库以检查新消息。我的 php 脚本打印出这样的 div：

include 'status.php';

$strings = Status::messages();
$i = 1;
foreach($strings as $string){
  print '<div id="'.$i.'">'.$string.'</div>';
  $i++;
}

这会打印一个 id 从 1 到 x 的完整 div。现在我需要一个可以一次显示其中一个 div 的 JavaScript 函数。要获得 div 的总数，我这样做：

var top_level_div = document.getElementById('messagecontainer');
var count = top_level_div.getElementsByTagName('div').length;

我不知道如何从这里走。

编辑：

这是我加载消息的ajax计时器：

ajaxTimer8 = new Ajax.PeriodicalUpdater('messagecontainer', 'includes/messagereloader.php', {
     method: 'get', frequency: 20, decay: 1,
     onSuccess : function() {
     pollCounter = 11;
     }
});
4

1 回答 1

2

好的，我试图模拟 div 已经存在：

<div id="messagecontainer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>​

messagecontainer 中的 div 默认是隐藏的（不显示）：

// in your css
#messagecontainer > div {
  display: none;
}​

现在在我们的脚本中，我们创建一个每 15 秒运行一次的间隔，将前一个 div 设置为不显示，将当前 div 设置为显示块：

var top_level_div = document.getElementById('messagecontainer')
  , divs = top_level_div.getElementsByTagName('div')
  , counter = 0
  , interval = window.setInterval(function() {

      // hide the previous div if it exists (counter > 0)
      if(divs[counter - 1]) {
          divs[counter - 1].style.display = "none";
      }

      // set the current div visible
      divs[counter].style.display = "block";
      counter += 1;

      // have we finished all divs? then clear the interval
      if(counter === divs.length) {
         window.clearInterval(interval);
      }
    }, 15000); // run that every 15 seconds​

在这里查看一个工作示例：http: //jsfiddle.net/ZY4Vb/2/

于 2012-12-18T15:37:22.807 回答