0

MySQL テーブルから一度に 1 つずつ、アクティブなメッセージを表示するメッセージ ボックスを作成しようとしています。データベース内のアクティブなメッセージはいくつでもよいため、div がいくつあるかはわかりません。今、必要な div を ajax タイマーと php スクリプトで出力しました。このタイマーは、新しいメッセージをチェックするために 20 秒ごとにデータベースにクエリを実行し続けます。私のphpスクリプトは、次のようなdivを出力します：

include 'status.php';

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

これは、1 から x までの id を含む div を出力します。今、これらの div の 1 つを一度に表示できる 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>​

メッセージコンテナ内の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 に答える