Question

我使用javascript将事物绑定到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}

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

这非常脆弱。我无法使用其他名称来装饰任何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是一个sorta GUID（但我可以'手动轻松地做到这一点'......）

现在，in theory，类名是CDATA，所以一切都应该是tickety-boo，但是我是ma doots！特别是在旧的跨浏览器方面......

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

Answer 1

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>

Answer 2

allowed className characters将帮助您确定要使用的内容。

对我而言，我会倾向于：

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

class="soft_bar wet_foo hot_fuzz"

特别是，大括号{，}将不起作用，因为它们在CSS样式表中用于标记样式属性的块。

Answer 3

在此类？中，您可以在new attr

中为键/值创建数据

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

Answer 4

如果您不关心有效的HTML，可以使用任意属性名称，而不是试图劫持“class”属性。

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

通过以下方式从jQuery访问它们的值：

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

Answer 5

你能用div或span包围有问题的物体吗？然后使用id和/或class属性存储名称 - 值对，并使用父属性访问它们。

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

这使您可以对原始对象执行任何操作。

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

5 个答案: