Question

关于id vs class的Stack Overflow上有很多问题，但这些问题几乎总是与CSS有关 - 而且普遍接受的答案是使用类来设置特定元素集的样式和特定实例的ID。有道理，足够公平。

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

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

查看Stack Overflow标记问题编辑器上的工具栏 - 每个按钮都有一个ID来唯一标识它。有一个完美的意义 - 它是一个执行特定功能的按钮，可能是根据该ID挂钩的脚本。

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

这似乎错了。

另一个例子：我正在一个照片库网站上工作，每个照片上都有一个小工具栏。惯例说因为这些按钮有多个实例我应该使用类。真的？

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

如果我在网页上犯了重复ID的罪行，哪些浏览器实际上会中断？
对于破坏它的浏览器来说，它只会破坏CSS样式，或者jQuery选择器也会破坏。
在描述的情况下使用重复的ID真的很糟糕。

Answer 1

类别意味着是... （无限期）ID意味着是...... （权威）

“这个div是一个照片工具栏。可以更像它。”有道理，我会用一堂课。

我不一定是ID工具栏按钮，除非我确定页面上只能有一个该工具栏的实例。在使用StackOverflow的markdown编辑器的情况下，我也认为这些应该是类以获得更大的灵活性（整个编辑器可以包含在一个唯一的ID中，比如＃answer-editor或#common- 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交互，并且两个textareas应该具有不同的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
}

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

5 个答案: