HTMLページにいくつかの追加データを保存し、クライアントの要求に応じてこのデータを使用して、JSを使用してさまざまなものを表示したいと考えています。このデータをどのように保存すればよいですか? 目に見えないdiv、または何か他のもので?標準的な方法はありますか?
7 に答える
標準的な方法はないと思います。それらを JavaScript ソース コードに格納します。
JSを使用して表示している場合は、何らかのJSデータ構造に保存する必要があります(何をしたいかによって異なります)。ただし、ある要素を別の要素と交換したいだけの場合は、非表示の [ここに要素のタイプを挿入] もうまく機能します。
の一つ:
- 非表示の入力フィールド (サーバーに送信したい場合); また
- ページ上の非表示の要素 (CSS によって非表示)。
それぞれ用途があります。
たとえば、(1) を使用してフォーム送信に関する何かを特定する場合は、サーバー上でそれを信頼してはいけません (クライアントから送信されるものなど)。(2) は、「豊富な」ツール ヒント、ダイアログ ボックス、および通常はページに表示されないその他のコンテンツなどに最も役立ちます。通常、コンテンツは必要に応じて表示または複製され、その過程で変更される可能性があります。
JavaScriptで使用されるhtmlに情報を入力する必要がある場合は、使用します
<input id="someuniqueid" type="hidden" value="..." />
一般的には、目に見えない div が適しています。最初に何を表示する必要があるかがわかっている場合は、最初にそれをロードするだけで、AJAX 呼び出しを使用してページの残りの要素をロードすることで、ユーザー エクスペリエンスを向上させることができます。
少量の追加データについては、HTML5 の「data-*」属性を使用できます
<div id="mydiv" data-rowindex="45">
次に、 jQuery データ メソッドを使用してこれらのフィールドにアクセスします
$("#mydiv").data("rowindex")
または属性値で項目を選択
$('div[data-rowindex="45"]')
追加データを要素に添付
$( "body" ).data( "bar", { myType: "test", count: 40 } );
HTML 構造に HTML として構造化されるあらゆる種類のデータを格納する必要があります。表示するデータまたはコンテンツを適切に構築して、適切な HTML をページに表示する必要があります。すべてが完全で、セマンティックで、アクセス可能であることを確認してください。次に、CSS がデータを適切に表示することを確認します。完了したら、「display:none;」のインライン スタイルを追加します。動的に表示したい一番上のコンテナに移動します。そのインライン スタイルはテキスト リーダーで読み取ることができるため、要素の適切な表示スタイルが変更されるまで読み取られません。
準備ができたら、JavaScript を使用してコンテナーのスタイルを変更します。
var blockit = function () {
var container = document.getElementById("containerid");
container.style.display = "block";
};