jQuery id选择器仅适用于第一个元素

Question

我有3个具有相同ID的按钮，当他被点击时，我需要获取每个按钮的值。

<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>

这是我当前的jQuery脚本：

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

但这仅适用于第一个按钮，单击其他按钮将被忽略。

Answer 1

我有3个具有相同ID的按钮…

您的HTML无效，同一页面中的元素不能超过一个id。

引用规格：

7.5.2 元素标识符：id和class属性

id =名称[CS]
此属性为元素分配名称。此名称在文档中必须唯一。

解决方案 ：从更改id为class，

<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);
    // No need for jQuery :$(this).val() to get the value of the input.
});

但这仅适用于第一个按钮

jQuery #id选择器文档：

每个id值在文档中只能使用一次。 如果为多个元素分配了相同的ID，则使用该ID的查询将仅选择DOM中的第一个匹配元素。
但是，不应依赖此行为。包含多个使用相同ID的元素的文档无效。

如果您查看jQuery源，则可以看到$使用id selecor-（$("#id")）进行调用时，jQuery会调用本机javascript
document.getElementById函数：

// HANDLE: $("#id")
} else {
    elem = document.getElementById( match[2] );
}

尽管在他们的规范中document.getElementById没有提到它必须返回第一个值，但这是大多数（也许是全部？）浏览器实现它的方式。