在一个 html 页面中有多个 ID 是否可以接受？

Question

Stack Overflow 上有很多关于 id 与 class 的问题，但这些问题几乎总是与 CSS 相关 - 普遍接受的答案是使用类来设置一组特定元素的样式，并使用 id具体实例。有道理，够公平。

然而，我发现随着我越来越多地使用 Javascript/jQuery/ajax，这种方法开始变得不那么明确，我发现应该为语义元素提供 id 的情况，但因为可能有多个我应该使用类的实例。

这是我的意思的一个例子：

查看 Stack Overflow 的 markdown 问题编辑器上的工具栏 - 每个按钮都有一个 ID 来唯一标识它。非常有意义 - 它是一个执行特定功能的按钮，并且可能有基于该 ID 的脚本。

现在假设我正在构建一个富 Web 应用程序，并且有一个页面有两个选项卡，每个选项卡上都有一个降价编辑器。这是否意味着工具栏按钮现在应该使用 classes 来识别它们？

这似乎是错误的。

另一个示例：我正在开发一个照片库网站，该网站在每张照片上都覆盖了一个小工具栏。约定说因为这些按钮有多个实例，所以我应该使用类。真的吗？

所以我的问题是......

• 如果我在一个页面上犯了重复 ID 的罪行，哪些浏览器实际上会崩溃？
• 对于确实会中断的浏览器，是否只是 CSS 样式会中断，还是 jQuery 选择器也会中断。
• 在上述情况下使用重复的 ID 真的很糟糕吗？

Answer 1

类表示是...（不定）ID 表示是...（确定）

“这个 div 是一个照片工具栏。可以有更多类似的。”有道理，我会使用一个类。

我不一定要标识工具栏按钮，除非我确定页面上只能有该工具栏的一个实例。对于 StackOverflow 的 markdown 编辑器，我也认为这些应该是更灵活的类（整个编辑器可以包装在一个唯一的 ID 中，例如#answer-editor 或 #comment-editor）。

浏览器在他们接受的内容方面非常灵活，但这并不意味着应该打破标准。

Answer 2

别这样。

不是浏览器会崩溃，而是脚本会崩溃。 jQuery，任何使用 .getElementById 等的东西。

在某些时候其他人可能需要在应用程序上工作，我预计他们会被重复的 ID 激怒。

Answer 3

我意识到这是一个相当古老的话题，但我只是遇到了一些可能相关的东西。

在我工作的地方，我们使用本土的 cms（巨大、高流量的网站）。不幸的是，通常在 cms 内容块之一中定义的 div 需要硬编码到为该块提供服务的 jsp 页面中。原因是块本身需要分成两部分，以便只更新其内容的一部分。我们需要使用相同的 div id 来避免破坏页面。然后给我们留下了很多页面，其中包含该 id 的两个实例，直到我们可以通过并从 cms 块中删除 div。

可怕的部分：一个实例现在是另一个实例的祖先，并且对两个实例都应用了样式，页面崩溃了。

在我第一次尝试时，我添加了$('#theId').attr('id', ''); 来删除 id，并发现 jQuery仅从第一个实例中这样做，这是第二个实例的祖先。即使它与第一个停止，也没有 js 错误。

记住这一点，直到我们可以清理 cms，

$('#theId').addClass('notThisOne');

$('.notThisOne #theId').attr('id', '');`

将防止页面中断，无论是新的（没有div#theId）还是旧的（包括div#theId）内容都在 cms 块中。

Answer 4

• 如果我犯了在页面上重复 ID 的罪行，哪些浏览器实际上会崩溃？ HTML 验证器抱怨，因为 id 属性应该是唯一的， 但是三大浏览器引擎让我侥幸逃脱。

• 对于确实会破坏的浏览器，是否只是 css 样式会破坏，还是 jQuery 选择器也会破坏。 jquery 选择器不能或不能按预期工作。因为它定义为选择唯一的

• 在上述情况下使用重复 ID 真的很糟糕吗？ 从每个标准来看，这都不是一个好习惯，所以尽量避免对浏览器、jquery 很有意义......

Answer 5

如果您有两个按钮，您应该有两个不同的 ID 来识别它们。您可以使用类来设置它们的样式，但没有什么可以阻止您对两个按钮使用一个 Javascript 函数：

$("#idOne").click(function(){
    myClickHandler(this);
});

$("#idTwo").click(function(){
    myClickHandler(this);
});

var myClickHandler = function(element){
    // element is the DOM Element of the Button that was clicked
    // Turn it into a jQuery Object: $(element)
};

当然，您的按钮通常与某种 TextArea 交互，并且这两个 textarea 应该具有不同的 ID。因为那样你就可以这样做了：

$("#idOne").click(function(){
    myClickHandler(this,"idOfTextArea1");
});

$("#idTwo").click(function(){
    myClickHandler(this,"idOfTextArea2");
});

var myClickHandler = function(element, textAreaId){
    var ta = $("#"+textAreaId);
    // Do something with the textarea
}