jQuery の ID セレクターが同じ ID を持つ複数の要素で機能しないのはなぜですか?

jQuery ID セレクターが複数の要素で機能しない

複数の要素に同じ ID を使用しているにもかかわらず、jQuery の ID セレクターは最初の要素のみを認識します。そのID。これにより、クリック イベント時に複数の同じ ID 要素の値を取得しようとするときに問題が発生します。ここで問題が発生します:

<button>

$("#xyz").click(function() {
  var xyz = $(this).val();
  alert(xyz);
});

ただし、この jQuery スクリプトは最初のボタン (「XYZ1」) の値のみをキャプチャします。他のボタンをクリックしても応答はありません。

この動作の理由は、HTML ID 属性の性質にあります。 HTML 仕様によれば、ID 値はドキュメント内で一意である必要があります。複数の要素に同じ ID を割り当てるとこのルールに違反し、ブラウザは ID によるクエリ時に最初に一致した要素のみを返します。

解決策: Class

To による一意の識別子この問題に対処するには、ID 属性をクラス属性に置き換えます:

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

ここで、クラス セレクターを使用します。 jQuery:

$(".xyz").click(function() {
  alert(this.value);
});

このコードは、クリック時に 3 つのボタンすべての値を正常に取得します。信頼性の低い ID セレクターに依存する代わりに、クラス属性は複数の同様の要素に一意の識別子を提供し、特定の情報の取得を可能にします。

以上がjQuery の ID セレクターが同じ ID を持つ複数の要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。