HTML/CSS 两个不同页面上的两个元素可以有相同的 ID 吗?
Can two elements on two different pages have the same ID in HTML/CSS?
是否可以在两个不同的页面上使用具有相同 ID 的元素?
jQuery 选择器在这种情况下如何工作?
id 在一页上必须是唯一的。
将 id
分配给一个元素的意图,而不是 class,是说:
this element has a unique identity
如果不同页面上的两个元素代表相同的数据,但是,它们具有相同的 id
是可以接受的,例如:
page_1.html
<div id="title">About Me</div>
page_2.html
<div id="title">My Projects</div>
相反,如果两个页面上的元素代表不同的数据,并且您为它们分配了相同的数据 id
,虽然在技术上是有效的,但日后可能很难理解您的代码,例如:
page_1.html
<div id="contact">My Name</div>
page_2.html
<div id="contact">click to contact</div>
作为一个可能会想对具有不同数据的元素使用相同 id
的场景的示例,我分享以下经验,以防它帮助任何人思考类似的情况...
我最近试图通过将一个动态注入的元素分配到具有相同 id
(编辑内容场景中的 <input>
元素)的页面来成为 "clever",而不管其位置(以编程方式它只出现在页面中一次)。
这种方法的优点是:
- 单个 CSS 样式定义
- 动态元素的单个 HTML 模板
- 后续事件处理逻辑中的预期相似性
但是我发现我总是需要一种方法来唯一地标识实例,所以我最终使用了指示唯一实例的数据属性。
它很快就变得非常复杂,我有点后悔我的方法并且仍然想知道分配一个唯一的 id
是否会使程序逻辑更简单(但我现在没有时间重构).
如果每个具有相同 ID 的元素都位于其自己的页面上,那么 jQuery 一次只会看到一个元素,因为每个页面上下文中只存在一个具有该 ID 的此类元素一个时间。就这么简单。
是否可以在两个不同的页面上使用具有相同 ID 的元素?
jQuery 选择器在这种情况下如何工作?
id 在一页上必须是唯一的。
将 id
分配给一个元素的意图,而不是 class,是说:
this element has a unique identity
如果不同页面上的两个元素代表相同的数据,但是,它们具有相同的 id
是可以接受的,例如:
page_1.html
<div id="title">About Me</div>
page_2.html
<div id="title">My Projects</div>
相反,如果两个页面上的元素代表不同的数据,并且您为它们分配了相同的数据 id
,虽然在技术上是有效的,但日后可能很难理解您的代码,例如:
page_1.html
<div id="contact">My Name</div>
page_2.html
<div id="contact">click to contact</div>
作为一个可能会想对具有不同数据的元素使用相同 id
的场景的示例,我分享以下经验,以防它帮助任何人思考类似的情况...
我最近试图通过将一个动态注入的元素分配到具有相同 id
(编辑内容场景中的 <input>
元素)的页面来成为 "clever",而不管其位置(以编程方式它只出现在页面中一次)。
这种方法的优点是:
- 单个 CSS 样式定义
- 动态元素的单个 HTML 模板
- 后续事件处理逻辑中的预期相似性
但是我发现我总是需要一种方法来唯一地标识实例,所以我最终使用了指示唯一实例的数据属性。
它很快就变得非常复杂,我有点后悔我的方法并且仍然想知道分配一个唯一的 id
是否会使程序逻辑更简单(但我现在没有时间重构).
如果每个具有相同 ID 的元素都位于其自己的页面上,那么 jQuery 一次只会看到一个元素,因为每个页面上下文中只存在一个具有该 ID 的此类元素一个时间。就这么简单。