2

これが可能かどうかを確認するために高低を検索しましたが、手ぶらで出てきました。まず、私のコードは次のとおりです。

 <div id="information" style="display:none">
 </div>

<?php $seat = mysql_query("SELECT * FROM people WHERE seat='C3-24'"); $row = mysql_fetch_array($seat); ?>

     <ul>
        <li> <?= $row['first_name']; ?></li>
        <li> <?= $row['last_name']?> </li>          
        <li> <?= $row['seat']?></li>            
     </ul>                   

 </div><!-- information -->

 <div id="c3-24" class="seat">
    <a class="trigger" onClick="document.getElementById('information').style.display='block';"></a></div>
</div>

li基本的に、を選択したときにリストを更新したいdiv id "c3-25"。これで、データベース行のみを出力する意志があることがわかりましたWHERE seat="C3-25"が、この構造を他の場所で再利用したいと考えています。私が読んだことから、これは不可能です。理想的には、div (c3-24 から c3-50 まで) のリストを作成し、liフィールドでアンカー タグがクリックされたときに対応する情報を表示したいと考えています。

複数の「情報」divを配置しようとしましたが、情報が積み重なってしまいます。

どんな助けでも大歓迎です。

4

1 に答える 1

1

問題はタイミングです。問題を理解するために検討する価値のある、非常に異なる実行コンテキストが 2 つあります。

  1. ページ構築 (PHP) - Web サーバーは HTML を作成してブラウザーに送信します。
  2. ユーザー インタラクション (JavaScript) - ユーザーのブラウザーがページをレンダリングし、ユーザーがそのページを操作しています。

ページの構築時間はブラウザが情報を取得する前に発生するため、ユーザーの決定を実装できない可能性があります (後で発生します)。

この種のソリューションに対する一般的なソリューションは、アプリケーションを複数のリクエストに分割することです。ベスト プラクティスとして、JavaScript を別のファイルに分割し、委任と呼ばれる手法を使用してコードの量を減らすこともお勧めします。

これが私がそれを行う方法です。まず、ページ構造 (PHP/HTML) を送信します。

<div id="information">
  <!-- leave empty -->
</div>
<div class="seats">
  <div class="seat">
    <a class="trigger">c3-24</a></div>
  </div>
  <div class="seat">
    <a class="trigger">c3-25</a></div>
  </div>
  ...
</div>

次に、別の JavaScript ファイルでユーザー インタラクションを設定します。

// setup a click handler on the parent 'seats' div
document.querySelector('.seats').addEventListener('click', function(e){
  // check if the target of the click was actually an anchor tag with class=target
  if (e.target.classList.contains('target')) {
    var
      // use the text of the anchor tag to get the seat
      seat = e.target.textContent,
      // create an XMLHttpRequest to asynchronously get the seat details
      req = new XMLHttpRequest();
    // handle server result by inserting details
    req.onreadystatechange = function() {
      if(req.readyState === 4){
        document.getElementById('information').innerHTML = req.responseText;
      }
    };
    req.open("GET", "seatdata.php?seat=" + encodeURIComponent(seat), true);
    req.send(null);
  }
});

最後に、特定の座席のデータを取得する別の PHP スクリプトを実装します (例: seatdata.php)。スクリプトはseatURL パラメータを取得し、$_GET['seat']それをクエリで使用する必要があります。

マダラのコメントによると、このmysql_query関数は非推奨になっているため直接使用しないでください。代わりに、より良いものを使用してください。

于 2012-09-17T19:29:25.393 に答える