Cách tốt nhất để trình bày cặp khóa/giá trị Trong các tên lớp HTML

Question

Tôi ràng buộc mọi thứ với các đối tượng HTML bằng javascript và cần một cơ chế phức tạp hơn một chút so với chỉ các tên lớp.

tiếp cận đầu tiên của tôi là sử dụng tên lớp giống như khai báo cấu trúc nơi ràng buộc là vào vị trí tên như vậy:

Definition = identifier: foo bar baz 

Encoding một số tên lớp với định nghĩa này cho

<p id="someid" class="identifier bish bash bosh"> 
<div id="anotherid" class="identifier heebie jeebie"> 

này sau đó có thể được đọc là:

{foo: bish, bar: bash, baz: bosh}; 
{foo: heebie, bar: jeebie} 

Lưu ý rằng các ràng buộc có numbe khác nhau rs của tham số.

Điều này rất mong manh. Tôi không thể trang trí bất kỳ phần tử html nào có tên bổ sung (ví dụ để thêm các hành vi jquery như kéo và thả, v.v ...) và thường có một chút chất lượng ...

Điều tôi muốn làm là đại diện cho chúng cặp giá trị quan trọng như vậy:

<p id="someid" class="id{foo:bish} id{bar:bash} id{baz:bosh} random class"> 
<div id="anotherid" class="ui-draggable id{bar:jeebie} id{foo:heebie}"> 

nào cho phép tôi để có vị trí ngẫu nhiên và thời gian ngẫu nhiên của tên lớp trên các yếu tố cung cấp id của tôi là một GUID sorta (nhưng tôi có thể 'làm cho điều đó nên' bằng tay dễ dàng đủ ...)

Bây giờ, in theory, tên lớp là CDATA, vì vậy mọi thứ đều phải là màu sắc, nhưng Tôi là ma doots! đặc biệt ở phía bên trình duyệt cũ ...

Tư vấn, đề xuất, nghệ thuật trước, thực hành tốt nhất về cú pháp tốt nhất cho các cặp KV trong tên lớp đều được biết ơn.

Answer 1

HTML5 sẽ thêm thuộc tính data- * chỉ cho mục đích này và các thuộc tính này đã hoạt động trong mọi trình duyệt hiện nay (nhưng có thể gửi một số trình xác thực cho vòng lặp).

http://ejohn.org/blog/html-5-data-attributes/

<li class="user" data-name="John Resig" data-city="Boston" 
    data-lang="js" data-food="Bacon"> 
    <b>John says:</b> <span>Hello, how are you?</span> 
</li> 

Answer 2

allowed className characters sẽ giúp bạn xác định những gì cần sử dụng.

Đối với tôi, tôi sẽ nghiêng về một cái gì đó như:

keys: soft, hard, wet, hot 
values: foo, bar, baz, fuzz 

class="soft_bar wet_foo hot_fuzz" 

Đặc biệt, niềng răng {,} sẽ không hoạt động khi chúng được sử dụng trong css để đánh dấu khối tài sản phong cách.

Answer 3

nó là cần thiết rằng trong lớp này ?, bạn có thể tạo một dữ liệu cho khóa/giá trị trong mới attr

$("#someid").attr("key_val", "id{foo:bish} id{bar:bash} id{baz:bosh}"); 

Answer 4

Nếu bạn không quan tâm về HTML hợp lệ, bạn chỉ có thể sử dụng các tên thuộc tính tùy ý thay cố gắng chiếm đoạt thuộc tính "class".

<p id="someid" foo="bish" bar="bash" baz="bosh"> 

Và truy cập giá trị của họ từ jQuery qua:

$("#someid").attr("foo"); // "bish" 

Answer 5

Ông có thể bao quanh các đối tượng trong câu hỏi với một div hoặc trải dài? Sau đó, sử dụng thuộc tính id và/hoặc lớp để lưu trữ các cặp tên-giá trị và truy cập chúng với thuộc tính cha mẹ.

<span id="foo_bar_baz" class="bish_bash_bosh"><p id="someid"></span> 

Điều này cho phép bạn làm bất cứ điều gì bạn muốn với đối tượng gốc.