为什么 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中文网其他相关文章！