如何为某些HTML标签存储任意数据

Question

我正在制作一个页面，该页面具有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标签的任意信息 ？

Answer 1

您正在使用哪个版本的HTML？

在HTML 5中，使用以data-开头的自定义属性是完全有效的，例如

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

在XHTML中，这不是真的有效。如果您处于XHTML1.1模式，浏览器可能会抱怨它，但是在1.0模式下，大多数浏览器只会默默地忽略它。

如果我是你，我将遵循基于脚本的方法。您可以使其在服务器端自动生成，因此维护起来不会麻烦。