如何存储一些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标记存储任意信息?

当前回答

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

2009-08-20 13:12:00

其他回答

我发现元数据插件可以很好地解决使用html标记存储任意数据的问题，并且可以很容易地检索和使用jQuery。

重要提示:您包含的实际文件只有5 kb，而不是37 kb(这是完整下载包的大小)

下面是一个例子，它被用来存储值时，我使用生成谷歌分析跟踪事件(注:数据。标签和数据。值碰巧是可选参数)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>

2011-09-09 14:31:12

另一种方法是将key:value对存储为一个简单的类，使用以下语法:

<div id="my_div" class="foo:'bar'">...</div>

这是有效的，可以很容易地用jQuery选择器或自定义函数检索。

2011-10-27 15:37:00

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

储存:储存某物:

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

检索数据:

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

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

2009-01-11 04:31:31

一种可能是:

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

2009-01-11 02:56:06

你可以使用你自己的随机元素属性的data-前缀(<span data-randomname=" data goes here…"></span>)，但这只在HTML5中有效。因此，浏览器可能会抱怨有效性问题。

你也可以使用<span style="display: none;">数据在这里…跨度< / >标记。但是这样你就不能使用属性函数了，如果css和js被关闭了，这也不是一个很好的解决方案。

但我个人更喜欢的是:

<input type="hidden" title="Your key..." value="Your value..." />

输入将在所有情况下被隐藏，属性是完全有效的，如果它在<form>标记内，它将不会被发送，因为它没有任何名称，对吗? 最重要的是，属性真的很容易记住，代码看起来很漂亮，很容易理解。你甚至可以在里面放一个id属性，这样你也可以很容易地用JavaScript访问它，并通过input.title访问键值对;input.value。

2012-08-24 16:54:10

如何存储一些HTML标签的任意数据

推荐文章

最新文章

标签