制作会社の小さなサイトを作っています。ユーザーがメニューから監督の名前をクリックすると、すべてのメニュー項目が消え、その監督が制作した経歴と作品だけが表示されます。
私が抱えている問題は、どのディレクターがクリックされたかを識別するためのjavascript変数をphpに渡して、データベースからディレクターの情報を実際に取得できるようにする方法がわからないことです...実行する方法はありますかこれは、ページ間で単一のシームレスなアニメーションで維持しようとしているため、GETまたはPOSTなしで実行できますか？
明確にするために、インタースティシャルページを使用せずに、これらすべてを1つのページに含めたいと思います。
これを実現するには、AJAX を使用する必要があります。技術的には GET または POST 変数を渡しますが、それはシームレスです。
さまざまなスクリプトベースのソリューションが存在する可能性がありますが、スクリプトなしで実行できます。
複数の送信ボタンがあるフォームを使用します。それぞれに一意の名前を付けます。クリックされたものだけがフォームとともに送信されます。
各ディレクターのすべての情報をページにロードして、クリックされたディレクターの情報を表示することもできます。サーバーを個別に呼び出す必要はありません。
または、AJAXリクエストを使用することもできます。適切な情報が返されるように、リクエストでクリックされたボタンの一意の識別子（名前、ID、クラスなど）を使用します。ただし、このような機能は、単純なフォームや、ページに既に存在する要素を表示または非表示にするよりも、作業が多く、エラーが発生しやすくなります。
すべてのデータを一度にロードし、JavaScript を使用して必要なものを非表示/表示することについて RobG が提案したことは、この場合の方法だと思います。
3 人の取締役がいて、それぞれに経歴と作品を含む 'div' を与え、各 div には id='dir1'、'dir2'、および 'dir3' があるとします。それらはすべて「directorInfo」という名前のクラスを持ち、属性 style='display:none' を使用してページが最初にロードされるときに非表示になります。「but1」、「but2」、「but3」という名前の各ディレクターに対応する 3 つのボタンがあり、それぞれの値は 1、2、または 3 であり、それぞれに class='directorButtons も与えます。 ' JQuery で簡単に識別できるようにします。
JQ を使用して、ボタンをクリック イベントにバインドします。そのようです：
$('.directorButtons').on('click', function(){
$('.directorInfo').hide();
$('#menuItems').hide();
$('#dir'+this.val()).show();
return false;
});
$('.close').on("click", function(){
//give the user a way to unhide the menu.
$('.directorInfo').hide();
$('#menuItems').show();
return false;
});
コードの 2 番目の部分は、各 div にも閉じるボタン、または href='#' および class='close' を含む 'a' タグ内に X が必要であるため、ユーザーが X をクリックするとそれらが取得されるためです。最初に戻ると、メニューが再び表示されます。
これは、微調整して多くのことを行うことができる単純な例です (モーダルやアニメーションの使用など)。AJAX を使用せずにこの方法で行うと、サーバーからの応答を待つのではなく、即座に応答できるという追加の利点も得られます。