2010-06-22 40 views
11

tôi biết, hai yếu tố không thể cùng một id. Nhưng nó sẽ xảy ra như vậy, mà trong dự án của tôi tôi có hai yếu tố với cùng id trong divs khác, như thế nàyCó bình thường khi có hai phần tử có cùng id trong hai phần tử div với id khác không?

<div id="div1"> 
    <img id="loading" /> 
</div> 
<div id="div2"> 
    <img id="loading" /> 
</div> 

và css:

#div1 #loading 
{ 
    some style here... 
} 
#div2 #loading 
{ 
    another style here... 
} 

hoạt động tốt đối với tôi, nhưng có lẽ nó không được reccomended để làm như vậy?

Cảm ơn

CẬP NHẬT

Vâng, tôi biết, thét tôi có thể sử dụng các lớp học, và nó được đề nghị mạnh mẽ để làm bằng cách như vậy, nhưng tôi muốn biết là có bất kỳ nguy cơ tiềm ẩn trong việc sử dụng này của id? tôi nghĩ không, bởi vì khi tôi viết ví dụ

$("#div1 #loading")... nó trở thành một yếu tố duy nhất. phải không?

+0

có trình duyệt bạn biết không, nơi trình duyệt không hoạt động? – Simon

+2

@Syom: nó cũng có thể làm việc tốt với CSS, nhưng bạn gần như chắc chắn sẽ có vấn đề nếu bạn cố gắng và có được những yếu tố đó trong Javascript. –

+0

@Andy E của đầu tôi sử dụng Jquery, và gọi cho họ cùng một cách thet trong css. tức là $ ("# div1 #loading") ...? có bất kỳ rủi ro potencial? – Simon

Trả lời

13

id phải là (nên) là duy nhất !!

bạn sẽ có rắc rối chọn nó qua JS trong hầu hết các trình duyệt - tốt hơn sử dụng lớp

18

Thay đổi id của bạn đến lớp. Nó không phải là một ý tưởng tốt để cung cấp cho id trùng lặp.

Hãy suy nghĩ hai học sinh có cùng cuộn không có trong lớp học. Hãy tưởng tượng họ nhận được kết quả kiểm tra. Nhà trường sẽ có thể nhận ra bảng đánh dấu như thế nào?

cách của bạn không phải là trình duyệt chéo tương thích, và sẽ ảnh hưởng rất nhiều trong khi mã hóa JavaScript, và được đăng hình thức vv

Bạn có thể có được hiệu quả tương tự sử dụng lớp

thấy

<div id="div1"> 
    <img class="loading" /> 
</div> 
<div id="div2"> 
    <img class="loading" /> 
</div> 

và css:

#div1 .loading 
{ 
    some style here... 
} 
#div2 .loading 
{ 
    another style here... 
} 
4

ID phải là duy nhất, vì vậy id1 và id2 là tốt , Nhưng đối với nhiều yếu tố với cùng một phong cách, sử dụng một lớp HTML và lớp CSS selector:

.loading 
{ 
styles here 
} 

Những được phép lặp đi lặp lại nhiều lần như bạn muốn trên một trang :)

+1

Lớp HTML. Bộ chọn lớp CSS. Không có điều gì như một lớp CSS (và thuật ngữ này bị lạm dụng theo đủ các cách khác nhau mà nó có thể gây nhầm lẫn) – Quentin

+0

Cảm ơn sự điều chỉnh của David. :) – Kyle

4

Có bạn đúng, nó không được khuyến khích để làm như vậy. ID phải luôn là duy nhất (ví dụ: nếu bạn muốn chọn phần tử có javascript). Nếu bạn chỉ muốn thêm cùng một kiểu cho các div, chỉ cần sử dụng lớp css.

3

Có bình thường không? Số

Được khuyến nghị? Chắc chắn không phải! Nó thực sự bị cấm (nhưng thực thi là yếu).

Nhưng nó (rõ ràng) hoạt động, vì vậy ...

4

Unique:

Trong toán học và logic, cụm từ "có một và chỉ một" được dùng để chỉ ra rằng chính xác một đối tượng với một tài sản nhất định tồn tại.

#div1 #loading không khắc phục thực tế rằng bạn có hai trường hợp #loading trong your document. Vì vậy, không, đừng làm thế.

2

Id được sử dụng để phân biệt các phần tử, chúng phải là duy nhất vì lý do khác nhau, một trong số đó là sử dụng javascript, hàm getElementById sẽ không hoạt động tốt nếu bạn có ID trùng lặp, bạn sẽ không thể dự đoán những gì nó sẽ làm trên các trình duyệt khác nhau khi JS tự thực hiện trên mỗi trình duyệt khác nhau.

Nếu bạn muốn sử dụng một cấu trúc giống như tải #div và # div2 tải nó có vẻ rõ ràng rằng cả hai tải có công dụng tương tự vì vậy họ nên các lớp học và sẽ được sử dụng như

# div1.loading và # div2 này .loading

Ngoài ra một cộng của việc sử dụng cú pháp này sẽ được đặt theo phong cách phổ biến ở .loading như thế này

.loading {phong cách chung cho cả việc bốc}

# div1.loading {phong cách chỉ sử dụng bởi các tải trong div1}

# div2.loading {phong cách chỉ sử dụng bởi các tải trong div2}

7

Lý do lớn là cho JavaScript DOM thao tác. Trong trường hợp của bạn, nếu bạn làm điều gì đó như thế này ...

document.getElementById("loading") 

... JavaScript sẽ trả về phần tử đầu tiên và chỉ phần tử đầu tiên. Bạn sẽ không có cách nào để truy cập vào phần còn lại của họ mà không có một số DOM đi bộ nghiêm trọng.

1

xác thực và thuần túy-sang một bên, nó hoàn toàn hoạt động. Nhưng tôi chắc chắn sẽ cảm thấy khó chịu nếu tôi sử dụng id #loading đó và thấy rằng hiệu ứng jquery hoặc hiệu ứng css áp dụng cho hơn 1 phần tử. Hãy cho tôi biết nếu IE6 hoặc 7 hoặc Firefox 1.x hoặc 2.x có mã hỏng.

4

Chỉ vì không ai khác đã đăng nó - the HTML spec, section on ID, mà nói:

id = tên [CS]

Thuộc tính này gán đặt tên cho một phần tử. Tên này phải là là duy nhất trong tài liệu.

-4

Tôi không đồng ý với những người nói luôn sử dụng "duy nhất", nghĩa là ID khác nhau mỗi khi bạn gắn nhãn. Đôi khi nó được chấp nhận, chẳng hạn như trường hợp của tôi, nơi tôi đang thực hiện một máy tính.

javascript đang thực hiện phép toán và xuất kết quả vào div với id = "total". Tôi cần chính xác "tổng" đó ở 2 địa điểm khác nhau. Trong trường hợp này, tại sao tôi không sử dụng hai div khác nhau với cùng một ID? Tôi cần cùng một số trong cả hai ô.Với jQuery, tôi thực hiện và xuất kết quả một lần và nó điền cả hai cùng một lúc, đó là những gì tôi muốn.

Vì vậy, miễn là bạn hiểu những rủi ro mà nếu bạn đang KÉO thông tin từ 2 div đó với cùng một ID thì tôi cảm thấy tự do. Miễn là bạn không nhầm lẫn bản thân và cần 2 kết quả khác nhau trong cùng một ID div.

+3

Trình mã hóa thận trọng sử dụng HTML hợp lệ vì nhiều lý do. Đầu tiên trong số này là xem xét cho người duy trì sẽ nhận mã của mình sau này. HTML hợp lệ sử dụng các thuộc tính ID duy nhất. –

+3

Tôi không downvote nhiều câu trả lời nhưng tôi sẵn sàng để làm cho một ngoại lệ cho những người mà khuyến khích mọi người cố ý bỏ qua các tiêu chuẩn được công bố. – Flexo

+0

Bạn dường như đang sử dụng 'id', nơi bạn nên sử dụng' lớp'. Nếu bạn sử dụng một cái búa như một tuốc nơ vít, đừng ngạc nhiên nếu bạn phá vỡ một vài ốc vít. –

1

Thực tiễn không tốt khi sử dụng yếu tố tôi muốn. Bởi vì tôi muốn đưa ra một cái gì đó cho sự hiểu biết độc đáo với nhận dạng tên của họ. Và điều thứ hai chúng tôi sử dụng nó trong CSS nhưng trong JavaScript thực hành không tốt này. Ví dụ tốt cho lớp và học sinh này.

Vì vậy, đừng làm điều này.

Các vấn đề liên quan