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

当前回答

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

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

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

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

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

2009-01-11 02:16:50

其他回答

这是个好建议。感谢@Prestaul

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

非常正确，但是如果您想在普通的HTML中存储任意数据呢?还有另一种选择……

<input type="hidden" name="whatever" value="foobar"/>

将数据放在隐藏输入元素的name和value属性中。如果服务器正在生成HTML(即PHP脚本或其他东西)，而您的JavaScript代码稍后将使用此信息，那么这可能是有用的。

不可否认，它不是最干净的，但它是一种选择。它与所有设备都兼容浏览器，是有效的XHTML。你不应该使用自定义属性，也不应该使用带有“data-”前缀的属性，因为它可能不适用于所有浏览器。此外，您的文档将无法通过W3C验证。

2011-10-10 17:28:16

我知道您目前正在使用jQuery，但是如果您内联定义onclick处理程序呢?然后你可以这样做:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

2009-01-11 02:15:09

使用jquery,

存储:$('#element_id')。数据(“extra_tag”、“extra_info”);

检索:$('#element_id').data('extra_tag');

2013-06-07 13:50:15

您可以使用隐藏的输入标记。我在w3.org上没有得到验证错误:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

使用jQuery，你会得到文章ID类似(未测试):

$('.article input[name=articleid]').val();

但如果可以的话，我会推荐HTML5。

2011-11-12 08:48:02

我发现元数据插件可以很好地解决使用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

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

推荐文章

最新文章

标签