具有相同ID的多個元素

Question

我聽說使用多個id屬性是非常不好的做法，但令我困惑的是，如果元素像這樣嵌套，該怎么辦...

<div id="slideshow1" class="slideshow">
    <div id="left" class="slideshow-arrow"></div>
    <div id="right" class="slideshow-arrow"></div>
</div>
<div id="slideshow2" class="slideshow">
    <div id="left" class="slideshow-arrow"></div>
    <div id="right" class="slideshow-arrow"></div>
</div>

我在這里用js作了一個例子，似乎一切正常。

http://jsfiddle.net/6YPsX/

如果它們嵌套在同一個元素中，那么唯一的ID是有意義的，但是ID真的需要在整個文檔中是唯一的嗎？

Answer 1

ID不僅僅是一種查找元素的方法，ID還有其他關聯。 以下鏈接應該會有所幫助，並且可以對此提供更深入的了解。 這里是要點：

id屬性在HTML中具有多個角色：

• 作為樣式表選擇器。 作為超文本鏈接的目標錨點。
• 作為從腳本中引用特定元素的一種方式。
• 作為已聲明的OBJECT元素的名稱。
• 用於用戶代理的通用處理（例如，用於在將數據從HTML頁面提取到數據庫中，將HTML文檔轉換成其他格式等時標識字段）。

鏈接到W3網站

Answer 2

您可以在同一元素上具有多個類

<div id="slideshow1" class="slideshow">
    <div class="slideshow-arrow left"></div>
    <div class="slideshow-arrow right"></div>
</div>

的CSS

.slideshow-arrow {
    background: none top left no-repeat;
    width: 20px;
    height: 20px;
}
.slideshow-arrow.left {
    background-image: url('...');
}
.slideshow-arrow.right {
    background-image: url('...');
}

Answer 3

這是一個不好的做法，它不會通過W3C驗證，並且在嘗試實現JavaScript時會變得更糟。 只需使用類名代替或給他們提供不同的ID名稱即可。