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

Question

如果多个HTML元素是不同的元素，它们是否具有相同的ID？这样的情况有效吗？：div#foospan#fooa#foo

Answer 1

我认为应该是唯一的还是必须是唯一的(即由Web浏览器执行)是有区别的。

ID应该是唯一的吗？是。

ID必须是唯一的吗？不，至少IE和Firefox允许多个元素具有相同的ID。

Answer 2

即使这些元素是不同类型的，也会给你带来一些严重的问题.

假设有3个具有相同id的按钮：

<button id="myid" data-mydata="this is button 1">button 1</button><button id="myid" data-mydata="this is button 2">button 2</button>
<button id="myid" data-mydata="this is button 3">button 3</button>

现在你设置了一些jQuery在下列情况下执行某项操作的代码myid单击按钮：

$(document).ready(function (){
    $("#myid").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interestingFunction();

        $('form').trigger('submit');
    });});

你会期望什么？单击的每个按钮都将使用jQuery执行Click事件处理程序设置。不幸的是这不会发生。只有第一按钮调用单击处理程序。另外两个点击时什么也不做。就好像他们根本不是纽扣一样！

所以总是分配不同的IDs到HTML元素。这会让你避免奇怪的事情。*)

<button id="button1" class="mybtn" data-mydata="this is button 1">button 1</button><button id="button2" class="mybtn" data-mydata="this is
 button 2">button 2</button><button id="button3" class="mybtn" data-mydata="this is button 3">button 3</button>

现在，如果您想让单击事件处理程序在单击任何按钮时运行，如果您将jQuery代码中的选择器更改为使用CSS类以如下方式应用于它们：

$(document).ready(function (){
    $(".mybtn").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interstingFunction();

        $('form').trigger('submit');
    });});