小编典典

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

javascript

我有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);
});

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


阅读 1171

收藏
2020-04-25

共1个答案

小编典典

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

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

引用规格:

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

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

解决方案 :从更改idclass

<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没有提到它必须返回第一个值,但这是大多数(也许是全部?)浏览器实现它的方式。

2020-04-25