Question

我正在尝试创建一个消息框，它将显示活动消息，一次一个地从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++;
}

这会打印一个div，其id从1到x。现在我需要一个可以一次显示其中一个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;
     }
});

Answer 1

好吧，我试图模拟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设置为none，将当前div设置为display block：

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/

使用计时器显示和隐藏多个div

1 个答案: