為什麼我的 jQuery ID 選擇器只影響第一個元素？

jQuery ID 選擇器只定位第一個元素

概述

本文解決了jQuery ID 選擇器(#xyz) 無法定位的問題多個元素具有相同的ID 值。相反，它僅對第一個匹配元素進行操作，使後續元素無響應。此行為歸因於 HTML id 屬性的錯誤使用以及 jQuery ID 選擇器的固有限制。

HTML 驗證

根據 HTML 規範，文件中的每個元素都必須具有唯一的id 屬性值。對多個元素使用相同的 ID 會使 HTML 無效。因此，以下HTML 程式碼（包含三個具有相同ID（“xyz”）的按鈕）是不正確的：

<button></button>

jQuery 選擇器行為

jQuery ID 選擇器(# id) 是旨在根據其唯一ID 定位單一元素。當多個元素共用相同的 ID 時，選擇器僅根據 HTML 規範選擇第一個符合的元素。因此，以下jQuery 腳本嘗試在單擊時檢索每個按鈕的值，該腳本僅對第一個按鈕起作用：

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

解決方案

要糾正此問題並確保每個為了實現按鈕的功能，必須修改HTML 程式碼以將id 屬性替換為class 屬性。這允許多個元素共享同一個類，而不違反 HTML 標準：

<button class="xyz" value="1">XYZ1</button>
<button class="xyz" value="2">XYZ2</button>
<button class="xyz" value="3">XYZ3</button>

相應的 jQuery 腳本應更新如下，以定位具有「xyz」類的所有元素：

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

結論

透過採用這些修改，您可以確保所有具有「xyz」類別的按鈕回應點擊事件，從而消除上一期只有第一個按鈕起作用。這種方法遵循 HTML 驗證標準，並利用 jQuery 類別選擇器的靈活性來實現所需的行為。

以上是為什麼我的 jQuery ID 選擇器只影響第一個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！