Question

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

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

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

无论如何，这个方法有效，但它smells有点，并且根本不可扩展（如果click函数有多个参数会发生什么？如果其中一些参数是可选的，会怎样？）< / p>

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

<a articleid="5" href="link/for/non-js-users.html">

在my recent question我问这个方法是否有效，结果是没有定义我自己的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中，custom attributes prefixed with data-完全有效，例如

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

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

如果我是你，我会遵循基于脚本的方法。你可以在服务器端自动生成它，这样就不会让后面的人感到痛苦。

Answer 2

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

存储内容：

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

要检索数据：

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

这就是它的全部内容，但请查看jQuery documentation了解更多信息/示例。

Answer 3

另一种方式，我个人不会使用它，但它可以工作（确保你的JSON有效，因为eval（）很危险）。

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

Answer 4

任意属性无效，但在现代浏览器中完全可靠。如果您通过javascript设置属性，那么您也不必担心验证。

另一种方法是在javascript中设置属性。 jQuery只为此目的有一个nice utility method，或者你可以自己动手。

Answer 5

与几乎所有可能的浏览器一起使用的hack是使用这样的开放类：<a class='data\_articleid\_5' href="link/for/non-js-users.html>;

这对于纯粹主义者来说并不是那么优雅，但是它得到普遍支持，符合标准，并且非常容易操作。这似乎是最好的方法。如果您serialize，修改，复制您的代码，或做其他任何事情，data将保持附加，复制等。

唯一的问题是你无法以那种方式存储不可序列化的对象，如果你在那里放置了非常庞大的东西，可能会有限制。

第二种方法是使用假属性，如：<a articleid='5' href="link/for/non-js-users.html">

这更优雅，但打破标准，我不是100％肯定支持。许多浏览器完全支持它，我认为IE6支持JS访问它，但不支持CSS selectors（这在这里并不重要），也许某些浏览器会完全混淆，你需要检查一下。

做一些有趣的事情，如序列化和反序列化会更加危险。

使用ids纯JS哈希主要有效，除非您尝试复制标记。如果您有tag <a href="..." id="link0">，请通过标准JS方法进行复制，然后尝试修改仅附加到一个副本的data，另一个副本将被修改。

如果您不复制tag或使用只读数据，则不会出现问题。如果您复制tag并且修改了它们，则需要手动处理。

Answer 6

使用jquery，

存储：$('#element_id').data('extra_tag', 'extra_info');

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

Answer 7

您可以使用隐藏的输入标记。我在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。

Answer 8

我知道您当前正在使用jQuery，但如果您在线定义onclick处理程序会怎样。然后你可以这样做：

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

Answer 9

作为jQuery用户，我会使用Metadata plugin。 HTML看起来干净，验证，并且您可以嵌入任何可以使用JSON表示法描述的内容。

Answer 10

为什么不利用那里有意义的数据，而不是添加任意数据？

即。使用<a href="/articles/5/page-title" class="article-link">，然后您可以通过编程方式获取页面上的所有文章链接（通过类名称）和文章ID（将正则表达式/articles\/(\d+)/与this.href匹配）。

Answer 11

所以应该有四种选择：

将数据放入id属性。
将数据放入任意属性
将数据放入类属性
将您的数据放入另一个标记

http://www.shanison.com/?p=321

Answer 12

我主张使用“rel”属性。 XHTML验证，很少使用属性本身，并且有效地检索数据。

Answer 13

这是一个很好的建议。感谢@Prestaul

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

非常正确，但是如果你想在普通的HTML中存储任意数据呢？这是另一种选择......

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

将数据放入隐藏输入元素的名称和值属性中。如果服务器生成HTML（即PHP脚本或其他），这可能很有用，并且您的JavaScript代码稍后将使用此信息。

诚然，不是最干净的，但它是另一种选择。它与所有人兼容浏览器并且是有效的XHTML。您应该 NOT 使用自定义属性，也不应该使用带有'data-'前缀的属性，因为它可能不适用于所有浏览器。此外，您的文档不会通过W3C验证。

Answer 14

您可以使用随机元素（<span data-randomname="Data goes here..."></span>）自己的属性的数据前缀，但这仅在HTML5中有效。因此浏览器可能会抱怨有效性。

您还可以使用<span style="display: none;">Data goes here...</span>标记。但是这样你就不能使用属性函数，如果关闭了css和js，这也不是一个很好的解决方案。

但我个人更喜欢以下内容：

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

输入将在所有情况下被隐藏，属性完全有效，如果它在<form>标记内，它将不会被发送，因为它没有任何名称，对吧？最重要的是，这些属性非常容易记住，而且代码看起来很简单易懂。您甚至可以在其中添加ID属性，因此您也可以使用JavaScript轻松访问它，并使用input.title; input.value访问键值对。

Answer 15

另一种方法是使用以下语法将键：值对存储为简单类：

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

这是有效的，可以使用jQuery选择器或自定义函数轻松检索。

Answer 16

一种可能性可能是：

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

Answer 17

在我以前的雇主，我们一直使用自定义HTML标签来保存有关表单元素的信息。问题：我们知道用户被迫使用IE。

当时FireFox效果不佳。我不知道FireFox是否改变了这一点，但请注意，读者的浏览器可能会或可能不支持将自己的属性添加到HTML元素中。

如果您可以控制您的阅读器使用的浏览器（即公司的内部Web小程序），那么请尝试一下。它有什么害处，对吗？

Answer 18

只要您的实际工作是在服务器端完成的，为什么您还需要输出中的html标签中的自定义信息？您需要知道的在服务器上的所有信息都是使用您的自定义信息的任何类型的结构列表的索引。我想你想把信息存放在错误的地方。

无论多么令人遗憾，我会认识到，在许多情况下，正确的解决方案并不是正确的解决方案。在这种情况下，我强烈建议生成一些javascript来保存额外的信息。

Answer 19

这就是我如何ajax页面......这是一个非常简单的方法......

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

这是如何工作的，它基本上会查看所有具有“ajx”类的URL，并且它会替换关键字并添加＃符号...所以如果关闭js，那么网址将按照通常的方式运行。所有“应用程序”（网站的每个部分）都有自己的关键字......所以我需要做的就是添加到上面的js数组中以添加更多页面......

例如，我的当前设置设置为：

 var objApps= ['ads','user'];

所以，如果我有一个网址，如：

www.domain.com/ads/3923/bla/dada/bla

js脚本会替换/ ads /部分，因此我的网址最终会

www.domain.com/ads/#p=3923/bla/dada/bla

然后我使用jquery bbq插件来相应地加载页面......

http://benalman.com/projects/jquery-bbq-plugin/

Answer 20

我发现元数据插件是一个很好的解决方案，可以解决使用html标记存储任意数据的问题，这样可以轻松检索和使用jQuery。

重要：您包含的实际文件仅为 5 kb而不是 37 kb（这是完整下载包的大小））

以下是一个用于存储我在生成Google Analytics跟踪事件时使用的值的示例（注意：data.label和data.value恰好是可选参数）

$(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"/>

Answer 21

在html中，我们可以在属性名称（如

）之前存储带有前缀“ data-”的自定义属性

<p data-animal='dog'>This animal is a dog.</p>。选中documentation

我们可以使用此属性来使用jQuery动态设置和获取属性，例如：如果我们有一个p标签，例如

<p id='animal'>This animal is a dog.</p>

然后为上述标签创建一个名为“ breed”的属性，我们可以编写：

$('#animal').attr('data-breed', 'pug');

要随时检索数据，我们可以编写：

var breedtype = $('#animal').data('breed');

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

21 个答案: