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

javascript html

2022-08-29 23:42:49

我正在制作一个由javascript提供的一些交互的页面。举个例子：发送AJAX请求以获取文章内容，然后在div中显示该数据的链接。显然，在这个例子中，我需要每个链接来存储额外的信息：文章的id。我一直在处理它以防万一的方式是将该信息放在href链接中：

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

然后，我使用 jQuery 查找 a.article 元素并附加相应的事件处理程序。（不要太纠结于这里的可用性或语义，这只是一个例子）

无论如何，此方法有效，但它闻起来有点，并且根本不可扩展（如果单击函数具有多个参数会发生什么？如果其中一些参数是可选的，该怎么办？）

显而易见的答案是在元素上使用属性。我的意思是，这就是他们的目的，对吧？（有点像）。

<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标签的任意信息片段？

答案 1

您使用的是哪个版本的 HTML？

在HTML 5中，将自定义属性作为数据前缀是完全有效的，例如

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

在 XHTML 中，这实际上并不有效。如果你处于XHTML 1.1模式，浏览器可能会抱怨它，但在1.0模式下，大多数浏览器只会默默地忽略它。

如果我是你，我会遵循基于脚本的方法。您可以使其在服务器端自动生成，这样维护起来就不会很痛苦。

答案 2

如果您已经在使用jQuery，那么您应该利用“data”方法，这是使用jQuery在dom元素上存储任意数据的推荐方法。

要存储某些内容：

$('#myElId').data('nameYourData', { foo: 'bar' });

检索数据：

var myData = $('#myElId').data('nameYourData');

这就是它的全部内容，但请查看jQuery文档以获取更多信息/示例。