Javascript 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>

但它只适用于第一个按钮，单击其他按钮将被忽略

我有3个相同id的按钮

您的HTML无效，一个页面中不能有多个具有相同id的元素

:

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

id=名称[CS] 此属性为元素指定名称。此名称在文档中必须是唯一的

解决方案：从id更改为类

但它只适用于第一个按钮

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中，他们没有提到它必须返回第一个值，这可能是最重要的？浏览器实现了它

---

ID表示标识符，每个文档仅有效一次。由于您的HTML在这一点上是错误的，一些浏览器选择第一个，一些浏览器选择最后出现的具有该ID的元素

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

---

然后使用$'button[name=xyz]'。单击函数{

您不能拥有相同的id，因为id在页面HTML中是唯一的。将其更改为类或其他属性名称

$('attributename').click(function(){ alert($(this).attr(attributename))});

---

根据我的经验，如果改用$'buttonxyz'选择器，它会起作用。这是一种攻击，但它仍然是无效的HTML。

虽然将id更改为类更好，但您可以使用以下命令获得具有相同id的所有元素：

或仅获取id为xyz的按钮：

$('button[id="xyz"]')

$('div[id="xyz"]')

或id为xyz的div：

$('button[id="xyz"]')

$('div[id="xyz"]')

等等

或者，您可以使用获取ID包含xyz的所有元素：

$('[id*="xyz"]')

---

当然，这意味着id部分包含xyz的所有元素都将被选中。

如果有多个id相同的元素，这也会起作用

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

---

您可以检查容器中是否有相同的id，您可以在上使用该id访问每个事件的每个元素

$containers.onclick，xyz，函数{ 提醒$this.val } XYZ1 XYZ2 XYZ3

---

这是一个有完整答案的本垒打！++1谢谢，我已经尝试过了，但它仍然有效，但是使用alertthis.val；现在我的button css类有问题，正如您所看到的，button Tag中有两个类我已经将我的类修改为：class=btn btn primary xyz谢谢您，它真的很有帮助Mafaik@gdoron你得到了它：P++来自堆栈溢出+1from me bruv++1:PLooks对我很好：也许你可以添加一句关于纯DOM方法的话，这样我们就可以使用它作为规范答案，因为这种情况可能需要对问题进行一些调整，但我是在手机上写的。不必让它成为社区wiki，你应该得到这样的回答：你不能有相同的id，因为id是唯一的，请使用类而不是id会解决你的问题这个问题在这里被问了很多次，所以我决定给它一个大的整容，并写了一个完整的描述。我希望它能帮助未来的访问者。事实上，如果你只使用$按钮[id=xyz]，它将适用于所有具有该id的按钮，就像原始问题一样。在Chrome中测试。实际上，上次我检查时，您甚至可以使用$'[id=xyz]'，它也可以工作。但是，它是无效的HTML，应该被修复，而不管是否存在未记录的黑客行为。可能是$'[id=xyz]'是没有文档记录的，但是属性包含选择器是有文档记录的，请参见上面的：P。

$('[id*="xyz"]')

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