我有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脚本:
jQuery
$("#xyz").click(function(){ var xyz = $(this).val(); alert(xyz); });
但这仅适用于第一个按钮,单击其他按钮将被忽略。
我有3个具有相同ID的按钮…
您的HTML无效,同一页面中的元素不能超过一个id。
id
引用规格:
7.5.2 元素标识符:id和class属性 id =名称[CS] 此属性为元素分配名称。此名称在文档中必须唯一。
7.5.2 元素标识符:id和class属性
id =名称[CS] 此属性为元素分配名称。此名称在文档中必须唯一。
解决方案 :从更改id为class,
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,则使用该ID的查询将仅选择DOM中的第一个匹配元素。 但是,不应依赖此行为。包含多个使用相同ID的元素的文档无效。
如果您查看jQuery源,则可以看到$使用id selecor-($("#id"))进行调用时,jQuery会调用本机javascript document.getElementById函数:
$
$("#id")
document.getElementById
// HANDLE: $("#id") } else { elem = document.getElementById( match[2] ); }
尽管在他们的规范中document.getElementById没有提到它必须返回第一个值,但这是大多数(也许是全部?)浏览器实现它的方式。