如果多个HTML元素是不同的元素，它们是否具有相同的ID？

Question

如果多个HTML元素是不同的元素，它们是否具有相同的ID？

这样的情况有效吗？：

div#foo

span#foo

a#foo

Answer 1

我认为应该是唯一的还是必须是唯一的(即由Web浏览器执行)是有区别的。ID应该是唯一的吗？是。ID必须是唯一的吗？不，至少IE和Firefox允许多个元素具有相同的ID。

Answer 2

即使这些元素是不同类型的，也会给你带来一些严重的问题.假设有3个具有相同id的按钮：<button&nbsp;id="myid"&nbsp;data-mydata="this&nbsp;is&nbsp;button&nbsp;1">button&nbsp;1</button><button&nbsp;id="myid"&nbsp;data-mydata="this&nbsp;is&nbsp;button&nbsp;2">button&nbsp;2</button> <button&nbsp;id="myid"&nbsp;data-mydata="this&nbsp;is&nbsp;button&nbsp;3">button&nbsp;3</button>现在你设置了一些jQuery在下列情况下执行某项操作的代码myid单击按钮：$(document).ready(function&nbsp;(){ &nbsp;&nbsp;&nbsp;&nbsp;$("#myid").click(function&nbsp;() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;buttonData&nbsp;=&nbsp;$(this).data("mydata"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Call&nbsp;interesting&nbsp;function... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interestingFunction(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('form').trigger('submit'); &nbsp;&nbsp;&nbsp;&nbsp;});});你会期望什么？单击的每个按钮都将使用jQuery执行Click事件处理程序设置。不幸的是这不会发生。只有第一按钮调用单击处理程序。另外两个点击时什么也不做。就好像他们根本不是纽扣一样！所以总是分配不同的IDs到HTML元素。这会让你避免奇怪的事情。*)<button&nbsp;id="button1"&nbsp;class="mybtn"&nbsp;data-mydata="this&nbsp;is&nbsp;button&nbsp;1">button&nbsp;1</button><button&nbsp;id="button2"&nbsp;class="mybtn"&nbsp;data-mydata="this&nbsp;is &nbsp;button&nbsp;2">button&nbsp;2</button><button&nbsp;id="button3"&nbsp;class="mybtn"&nbsp;data-mydata="this&nbsp;is&nbsp;button&nbsp;3">button&nbsp;3</button>现在，如果您想让单击事件处理程序在单击任何按钮时运行，如果您将jQuery代码中的选择器更改为使用CSS类以如下方式应用于它们：$(document).ready(function&nbsp;(){ &nbsp;&nbsp;&nbsp;&nbsp;$(".mybtn").click(function&nbsp;() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;buttonData&nbsp;=&nbsp;$(this).data("mydata"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Call&nbsp;interesting&nbsp;function... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interstingFunction(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('form').trigger('submit'); &nbsp;&nbsp;&nbsp;&nbsp;});});