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

Question

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

我正在制作一个由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中，拥有带有数据前缀的自定义属性是完全有效的，例如<div&nbsp;data-internalid="1337"></div>在XHTML中，这不是真正有效的。如果您处于XHTML 1.1模式，浏览器可能会抱怨它，但在1.0模式下，大多数浏览器都会默默地忽略它。如果我是你，我会遵循基于脚本的方法。你可以在服务器端自动生成它，这样就不会让后面的人感到痛苦。

Answer 2

如果您已经在使用jQuery，那么您应该利用“data”方法，这是使用jQuery在dom元素上存储任意数据的推荐方法。存储东西：$('#myElId').data('nameYourData',&nbsp;{&nbsp;foo:&nbsp;'bar'&nbsp;});要检索数据：var&nbsp;myData&nbsp;=&nbsp;$('#myElId').data('nameYourData');这就是它的全部内容，但请查看jQuery文档以获取更多信息/示例。

Answer 3

换句话说，我个人不会使用它，但它可以工作（确保你的JSON有效，因为eval（）是危险的）。<a&nbsp;class="article"&nbsp;href="link/for/non-js-users.html"> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;style="display:&nbsp;none;">{"id":&nbsp;1,&nbsp;"title":"Something"}</span> &nbsp;&nbsp;&nbsp;&nbsp;Text&nbsp;of&nbsp;Link</a>//&nbsp;javascript var&nbsp;article&nbsp;=&nbsp;document.getElementsByClassName("article")[0]; var&nbsp;data&nbsp;=&nbsp;eval(article.childNodes[0].innerHTML);