为什么我的 jQuery ID 选择器仅适用于第一个元素？

jQuery ID 选择器仅选择第一个元素：了解问题

尽管有三个具有相同 ID 的按钮，jQuery 的 #id 选择器仅响应第一个按钮单击。此行为源于基本的 HTML 规则，该规则规定文档中的每个元素必须具有唯一的 ID。

无效的 HTML 结构

提供的 HTML 代码通过分配相同的 ID 违反了此规则（" xyz") 到多个按钮。根据 HTML 规范，“此属性为元素分配一个名称。此名称在文档中必须是唯一的。”

解决方案：转换为类

要解决此问题，请将每个按钮都有一个类属性的 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 代码

使用更新的 HTML 结构， jQuery 代码应修改如下：

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery $(this).val() to get the value of the input.
});

理解 jQuery 的行为

jQuery 的 #id 选择器仅选择 DOM 中具有指定 ID 的第一个元素。这是因为浏览器中的底层 document.getElementById 函数执行此行为。

结论

通过遵循这些准则，您可以在 jQuery 中有效地处理具有相同功能目的的多个元素，确保所有按钮都会按预期响应点击。

以上是为什么我的 jQuery ID 选择器仅适用于第一个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！