4 
<!-- Some place on the webpage -->
  <input type="text" id="firstName">

<!-- Some other place on the same webpage, or maybe content ajaxed in later -->
  <input type="text" id="firstName">

それぞれ独自の ID を持ついくつかの入力フィールドを持つ HTML ページを生成するサーバー側スクリプトがあるとします。あるサーバー側クラスが Web ページの一部に入力フィールドを追加し、別のクラスが Web ページの別の部分を処理する場合があります。または、ページのさまざまな部分でさまざまなプログラマーが作業している可能性があります。HTML 入力フィールド ID との衝突を避けたい。この例として、親と同じ入力フィールド ID を持つ jQuery ダイアログ ポップアップを持つ親フォームが考えられます。現在、ID を生成するサーバー側クラスの名前を ID のプレフィックスとして付けています (また、どの部分がプレフィックスであるかを明確にするためにアンダースコアも付けています)。この方法で完全に一意の ID を取得するには、サーバー側クラスの完全な名前空間を含める必要があり、これにより ID が非常に長くなる可能性があります。

入力にプレフィックスを付けるよりも良いアプローチはありますか、またはこれのベストプラクティスは何ですか? 私は通常、この例外を除いて、すべての変数にキャメルケースを使用します。これはその規則を破る良い例外ですか?

あなたのほとんどは何をしていますか？ID ではなく、これらの入力フィールドを選択する方法を変更していますか? 入力フィールドをformタグまたはdivタグでラップし、サーバー側に機能を追加してこれらを作成しますか? (これらの入力を選択するために何をラップするかを制限しない自由が欲しいです。サーバー側のコードは、それらの入力がページに送られていることを知っているだけで値を取得するクライアント側のコードを生成する必要があります。ページ上の他のタグについて知っている. 管理がはるかに簡単です.) フィールドの各グループに css クラスを追加していますか?

4

4 に答える 4

2

この回答は、検索エンジンからアクセスするユーザーにもう少し向けられています。私の意見でidは、動的に生成されたフォームで属性を使用している場合、それが本当に一意のフィールドでない限り、おそらくある種の生成された ID/ハッシュである必要があります。それはさておき、これは HTML フォームに名前空間を付けるためのおそらく最良の方法です。

<input name="pet_store[name]" value="" />

<input name="dogs[0][name]" value="" />
<input name="dogs[1][name]" value="" />
<input name="dogs[2][name]" value="" />

<input name="cats[0][name]" value="" />
<input name="cats[1][name]" value="" />
<input name="cats[2][name]" value="" />

一度にすべて送信すると、入力は自動的に配列に編成されます (少なくとも PHP では、nodejs の場合はhttps://www.npmjs.com/package/qsで成功する可能性があります)。

jQuery では、次のようにすべての犬の名前フィールドを選択できます。

$('input[name$="[name]"][name^=dogs]')
于 2015-02-21T21:47:03.350 に答える
1

この場合、クラスを使用します。ID の一意性を制御できない場合、ID はほとんど意味がなくなります。

html を生成するコードから非常に長いクラス名を生成する代わりに、それらを必要とする入力に多くの短い css クラスを追加できます。ドキュメントにさまざまなクラスが多数あることは珍しくなく、それらはすべて jQuery セレクターと一緒に使用できます。また、入力が異なる形式である場合、フォーム ID (またはクラス) も「名前空間」のように機能すると見なすことができることを覚えておいてください。

参考までに、HTML ドキュメントの W3C グローバル構造のポイント 7.5.2では、idは一意でなければならないと述べられています。

于 2014-01-06T20:13:25.610 に答える
0

必要に応じて属性を使用data-xxxしますが、名前の衝突が問題になるまで、一意の ID を持つ何百もの DOM 要素を生成する独立したサーバー側スクリプトの実際のケースは思いつきません。

于 2014-01-06T20:23:27.240 に答える
0

sの考え方はid、要素への一意の参照であるため、同じ を参照する複数の要素を持つことは合法的ではありません (有効な HTML) id。衝突を避けて要素を識別したい場合は、クラスの組み合わせを使用できます。

たとえば、名前を尋ねるフォームが 2 つある場合 (前のコメントのように)、次のように使用できます。

<input type="text" class="ajax firstName" />

ajaxによって生成されたフォームの場合、および

<input type="text" class="initial-form firstName" />

ウェブページの初期フォーム用。

同様に、data-属性を使用して名前空間を保持することもできます。例えば：

<input type="text" data-namespace="ajax" class="firstName" />

(これは Javascript を使用してアクセスできますelement.dataset["namespace"])

于 2014-01-06T21:05:20.860 に答える