首頁 > web前端 > js教程 > 為什麼 jQuery 只選擇第一個具有重複 ID 的元素?

為什麼 jQuery 只選擇第一個具有重複 ID 的元素?

Linda Hamilton
發布: 2024-12-07 17:53:13
原創
353 人瀏覽過

Why Does jQuery Only Select the First Element with a Duplicate ID?

無效的HTML:具有相同ID 的多個元素

問題描述:

問題描述:

問題描述:

問題描述:

問題描述在給定HTML 結構,有三個具有相同ID「xyz」的按鈕。但是,當使用 jQuery ID 選擇器 $("#xyz") 處理 onClick 事件時,只有第一個按鈕有回應。其他按鈕將被忽略。

分析:

jQuery ID 選擇器旨在選擇文件中具有匹配 ID 的第一個元素。但是,根據 W3C 規範,ID 值在文件中應該是唯一的。多個元素具有相同的 ID 被視為無效 HTML。
<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 API 文件中所述,如果多個元素具有相同的 ID,則 jQuery 選擇器將只選擇第一個符合的元素。不建議依賴此行為,應修正 HTML 以確保 ID 的唯一性。

解決方案:

$(".xyz").click(function(){
    // Get the value of the button that was clicked
    var xyz = this.value;

    // Display the value in an alert box
    alert(xyz);
});
登入後複製
要解決此問題,請將 id 屬性替換為按鈕的類別屬性。這將允許按鈕具有不同的值,而不會違反 HTML 驗證規則。

修訂的HTML:更新的jQuery 腳本: 要處理所有具有xyxyz 類別的按鈕的點擊事件,請使用以下jQuery程式碼:此更新的程式碼將正確處理所有三個按鈕的 onClick 事件,並在警報框中顯示它們各自的值。

以上是為什麼 jQuery 只選擇第一個具有重複 ID 的元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板