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

Question

jQuery id选择器仅适用于第一个元素。我有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

我有三个有相同身份的按钮.。

如果HTML无效，则同一页中不能有多个具有相同元素的元素。id.

引用规范:

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

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选择器-($("#id"))，jQuery调用本机javascriptdocument.getElementById职能：

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

不过，在规格的document.getElementById他们没有提到它必须返回的第一个值，这是如何大多数(也许所有？)浏览器实现了它。

演示

Answer 2

ID的意思是“标识符”，每个文档只有效一次。因为您的HTML在这一点上是错误的，一些浏览器选择第一个，一些最后出现的元素使用该ID。

更改名称的ID将是一个很好的步骤。

然后使用$('button[name="xyz"]').click(function(){

Answer 3

根据我的经验，如果你用$('button#xyz')选择器相反，它将工作。这是一个黑客，但它仍然是无效的HTML。