为什么我的 jQuery ID 选择器只影响第一个元素？

jQuery ID 选择器仅定位第一个元素

概述

本文解决了 jQuery ID 选择器 (#xyz) 无法定位的问题多个元素具有相同的 ID 值。相反，它仅对第一个匹配元素进行操作，使后续元素无响应。此行为归因于 HTML id 属性的错误使用以及 jQuery ID 选择器的固有限制。

HTML 验证

根据 HTML 规范，文档中的每个元素都必须具有唯一的id 属性值。对多个元素使用相同的 ID 会使 HTML 无效。因此，以下 HTML 代码（包含三个具有相同 ID（“xyz”）的按钮）是不正确的：

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