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 = name [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它必须返回第一个值,但这是大多数(可能全部？)浏览器实现它的方式.

DEMO

Answer 2

ID表示"标识符",每个文档仅有效一次.由于此时您的HTML是错误的,因此某些浏览器选择第一个,一些是具有该ID的最后一个发生元素.

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

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