為什麼 jQuery 的 ID 選擇器不能處理具有相同 ID 的多個元素？

jQuery ID 選擇器不適用於多個元素

儘管對多個元素使用相同的ID，jQuery 的ID 選擇器僅辨識第一個元素那個身分證。當嘗試在單擊事件時檢索多個相同 ID 元素的值時，這會帶來挑戰。這是目前的問題：

<button>

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

但是，此 jQuery 腳本僅會擷取第一個按鈕（「XYZ1」）的值。點擊其他按鈕不會觸發任何回應。

此行為的原因在於 HTML ID 屬性的性質。根據 HTML 規範，ID 值在文件中必須是唯一的。為多個元素指派相同的 ID 違反了此規則，導致瀏覽器在透過 ID 查詢時僅傳回第一個符合的元素。

解決方案：帶有 Class 的唯一識別碼

至解決這個問題，用類別屬性取代 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);
});

此程式碼將在點擊時成功檢索所有三個按鈕的值。類別屬性不依賴不可靠的 ID 選擇器，而是為多個相似元素提供唯一標識符，並能夠檢索特定資訊。

以上是為什麼 jQuery 的 ID 選擇器不能處理具有相同 ID 的多個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！