在HTML类名中表示键/值对的最佳方式

我使用javascript将事物绑定到HTML对象，并且需要比类名更复杂的机制。在HTML类名中表示键/值对的最佳方式

我的第一个方法是使用类名状结构的声明，其中结合是名位置，像这样：

Definition = identifier: foo bar baz

编码一些类名这一定义给出了

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

那么这可以被解读为：

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

请注意，绑定具有不同的数量参数rs。

这是非常脆弱的。我不能用任何额外的名称来装饰任何html元素（例如添加像拖放等jquery行为等等），并且通常是有点伪劣的...

我想要做的就是将它们表示为像这样的键值对：

<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}">

，让我对我提供的id元素随机定位和类名的随机长度是八九不离十GUID（但我不能作出这样如此“手工很轻松了...... ）

现在，in theory，classnames是CDATA，所以一切都应该是tickety-boo，但我是马doots！特别是在旧的跨浏览器端...

建议，建议，现有技术，关于类名称中KV对的最佳语法的最佳实践都感激不尽。

来源

2009-08-05 Gordon Guthrie

HTML5将为此添加data- *属性，并且这些属性已经可以在今天的每个浏览器中使用（但可能会为循环发送一些验证器）。

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>

来源

2009-08-05 19:24:25

当你说'每个浏览器'你究竟是什么意思？当然有一些浏览器不支持它？ IE6？有什么限制支持这个...... – 2009-08-06 06:45:56

我不知道，因为我没有用过它。但据我了解，这是由于浏览器是标签汤解析器（一直到现在他们正在标准化）一直工作的怪癖之一。这不是有效的html ofcourse（除非你使用的html5文档类型，它可以在IE6上运行），但是在页面加载完成后可以添加这些属性，所以验证器不会抱怨。 – 2009-08-06 09:00:48

我服务这些KV的页面，然后使用图书馆后加载，使所有的魔力... – 2009-08-06 16:16:15

allowed className characters将帮助您确定使用什么。

对于我来说，我会瘦朝类似：

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

class="soft_bar wet_foo hot_fuzz"

尤其是大括号{，}，因为它们是在CSS样式表用来标记样式属性的块将无法工作。

来源

2009-08-05 16:55:18 scunliffe

的KV-对类名是用于用于CSS样式的JavaScript绑定和其他类的名字 - 所以我一点都，如果他们无法通过CSS势必困扰规则。我的理解是，他们仍然会工作（需要尝试它，看看虽然...） – 2009-08-06 06:48:28

这是必要的，在这个类？你可以ATTR

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

来源

2009-08-05 16:55:41

如果这是有效的方式去，我会简单地使用$（“＃someid”.attr（key，val））;但你能做到吗？ – 2009-08-05 16:58:43

创建新的键/值数据。如果你不关心有效的HTML，你可以只使用任意属性名称，而不是试图劫持“class”属性。

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

而且从jQuery的通过访问它们的值：

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

来源

2009-08-05 17:57:43 Jason

我不关心有效的HTML :)但我怀疑其他人在那里'谁可能想要使用这个库绑定的页面将是... – 2009-08-06 06:49:26

你能环绕对象问题，以股利或跨越？然后使用id和/或class属性来存储名称 - 值对，并使用父属性访问它们。

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

这可以让你做任何你想要的东西的原始对象。

来源

2009-08-05 18:43:52 bmb

页面上使用的每个其他库（JQuery等）将绑定到一个对象 - 绑定到一个对象的父母会违反“最少惊讶的原则”（我认为...） – 2009-08-06 06:52:43

在HTML类名中表示键/值对的最佳方式

回答

相关问题