Jquery 向HTML元素添加元数据的最佳方法

我正在尝试用一种方法在HTML中标记各种组件，这些组件由jQuery脚本解析，并在页面加载时创建

例如，目前我可以在我的页面中添加以下内容

<a href="link.html" class="Theme-Button Theme-Button-Style-win2007 Theme-Button-iconLeft Theme-Button-AlignmentCenter Theme-Button-fullWidth">This is a button</a>

当jQuery脚本找到它时，它将注入必要的html来创建一个带有图标的按钮以及所有必要的事件等

但是，这很混乱，需要很多长的类名。我宁愿做这样的事

<a href="#" class="Theme-Button" data="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

在我看来，它没有那么短，但更整洁，需要更少的解析。问题是，我对“expandos”做了一点研究，我相当肯定一些浏览器不会喜欢它，也不会验证它

---

有谁有更好的建议吗？

也可以使用类来完成这类事情

<a href="#" class="Theme-Button Style-win2007 Icon-left Align-Center FullWidth"></a>

---

您必须预先定义许多类，但与处理必须创建的每个键值对没有太大区别。

继续并为此使用属性，但在其上使用

数据-

前缀。从HTML5开始，所有元素上都有前缀为

data-

的属性。例如：

<a href="#" class="Theme-Button" data-theme="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

它现在在所有浏览器中都能工作，因为它现在是指定的行为，所以它是未来的证明。

使用jquery的“.data”属性。这很方便，很多人都不知道

有关更多信息，请参阅。

查看该功能。

支持：

element.store（“键”、“值”）

及

元素。检索（“键”、“值”）

---

简单。美好的有效。

将xhtml与来自其他DTD的自定义元素混合使用。或者将html5与

一起使用，谢谢Patrick。如果你看看我在这里的用户名和那篇文章上的名字，你会看到我写的：）不幸的是，我需要人们能够用HTML标记这些东西，以便稍后由jQuery解析，所以它必须在HTML元素中的某个地方，而不是在脚本中。链接说找不到页面！一定要用黑体字我用的是H3，黑体字是苏的选择：）@Felix:很好。它适用于几乎任何浏览器，定义自己属性的唯一真正问题是它会导致验证错误（如果您正在验证），它没有在任何地方指定（因此，理论上，UAs可能会忽略这些属性，而不会将它们提供给JS层或CSS，尽管显然没有任何属性），当然，还有与新定义的属性冲突的风险。HTML5形式化的好处在于，它一下子解决了这些问题。但你不必等待，即使在IE6上，现在也可以正常工作。几个月前，我找到了一些好答案。也可以查看bobince评论中的链接。可能重复的