我正在做一个有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标记存储任意信息?


当前回答

只是另一种方式,我个人不会使用它,但它工作(确保您的JSON是有效的,因为eval()是危险的)。

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

其他回答

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

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

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

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

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

一个几乎适用于所有可能的浏览器的黑客是使用这样的开放类:< A class='data\_articleid\_5' href="link/for/non-js-users.html>;

对于纯粹主义者来说,这并不是那么优雅,但它得到了普遍支持,符合标准,并且非常容易操作。这似乎是最好的方法了。如果你序列化,修改,复制你的标签,或者做其他任何事情,数据将保持附加,复制等。

唯一的问题是您不能以这种方式存储不可序列化的对象,如果您在那里放置非常大的对象,可能会有限制。

第二种方法是使用伪属性,例如:< A articleid='5' href="link/for/non-js-users.html">

这更优雅,但不符合标准,而且我不能100%确定是否支持。许多浏览器完全支持它,我认为IE6支持JS访问,但不支持CSS选择器(在这里这并不重要),可能有些浏览器会完全混淆,你需要检查一下。

做一些有趣的事情,比如序列化和反序列化,会更加危险。

使用id到纯JS散列通常是可行的,除非你试图复制你的标记。如果你有tag <a href="…" id="link0">,通过标准的JS方法复制它,然后尝试修改附加到一个副本的数据,另一个副本也会被修改。

如果不复制标记或使用只读数据,这不是问题。如果你复制标签,它们被修改了,你需要手动处理。

只要您的实际工作是在服务器端完成的,那么为什么还要在输出中的html标记中使用自定义信息呢?在服务器上,你所需要知道的只是一个索引,不管它是什么类型的结构列表,都包含你的自定义信息。我觉得你把信息存错地方了。

我承认,不管多么不幸,在很多情况下,正确的解决方案并不是正确的解决方案。在这种情况下,我强烈建议生成一些javascript来保存额外的信息。

许多年后:

这个问题是在数据公布大约三年前提出的……随着html 5的出现,属性成为了一个有效的选项,所以事实已经发生了变化,我最初给出的答案不再相关。现在我建议改用数据属性。

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

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>

一种可能是:

创建一个新的div来保存所有扩展/任意数据 做一些事情来确保这个div是不可见的(例如CSS加上一个div的class属性) 将扩展的/任意的数据放在[X]HTML标签中(例如,作为表格单元格中的文本,或其他任何你可能喜欢的内容),放在这个不可见的div中

所以应该有四种选择:

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

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