我正在做一个有javascript提供的一些交互的页面。举个例子:发送AJAX请求以获取文章内容的链接,然后在div中显示该数据。显然,在这个例子中,我需要每个链接存储一个额外的信息:文章的id。我处理它的方法是把这些信息放在href链接中:

<a class="article" href="#5">

然后使用jQuery找到a.article元素并附加适当的事件处理程序。(不要太纠结于可用性或语义,这只是一个例子)

不管怎样,这个方法是有效的,但是有点臭,而且根本不能扩展(如果click函数有多个参数会发生什么?如果其中一些参数是可选的呢?)

显而易见的答案是在元素上使用属性。我是说,这就是它们的作用,对吧?(种)。

<a articleid="5" href="link/for/non-js-users.html">

在我最近的问题中,我问这个方法是否有效,结果证明,如果不定义我自己的DTD(我没有),那么不,它是无效或不可靠的。一种常见的响应是将数据放入class属性中(尽管这可能是因为我选择的示例不佳),但对我来说,这种方法更有味道。是的,它在技术上是有效的,但它不是一个很好的解决方案。

我过去使用的另一种方法是实际生成一些JS,并将其插入到页面中的<script>标记中,创建一个与对象关联的结构。

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

但这是一个真正痛苦的屁股维护,通常只是非常混乱。

那么,要回答这个问题,如何为HTML标记存储任意信息?


当前回答

作为jQuery用户,我会使用元数据插件。HTML看起来很干净,可以进行验证,并且可以嵌入任何可以使用JSON符号描述的内容。

其他回答

使用jquery,

存储:$('#element_id')。数据(“extra_tag”、“extra_info”);

检索:$('#element_id').data('extra_tag');

我知道您目前正在使用jQuery,但是如果您内联定义onclick处理程序呢?然后你可以这样做:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

所以应该有四种选择:

将数据放在id属性中。 将数据放在任意属性中 将数据放在class属性中 将数据放在另一个标记中

http://www.shanison.com/?p=321

你使用的是哪个版本的HTML ?

在HTML 5中,使用data-作为前缀的自定义属性是完全有效的。

<div data-internalid="1337"></div>

在XHTML中,这实际上是无效的。如果您使用的是XHTML 1.1模式,浏览器可能会报错,但在1.0模式下,大多数浏览器会默默地忽略它。

如果我是你,我会遵循基于脚本的方法。您可以让它在服务器端自动生成,这样维护起来就不那么麻烦了。

我提倡使用“rel”属性。XHTML进行验证,很少使用属性本身,并且可以有效地检索数据。