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

当前回答

只是另一种方式，我个人不会使用它，但它工作(确保您的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);

2009-01-11 03:48:33

其他回答

在我以前的公司，我们一直使用自定义HTML标记来保存表单元素的信息。问题在于:我们知道用户被迫使用IE。

当时它在FireFox上运行得并不好。我不知道FireFox是否改变了这一点，但是请注意，读者的浏览器可能支持也可能不支持向HTML元素添加自己的属性。

如果你可以控制你的阅读器使用的浏览器(例如，一个公司的内部web applet)，那么无论如何都要尝试一下。这又有什么坏处，对吧?

2009-01-11 05:52:44

这就是我怎么做你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被关闭了，那么url就会像往常一样…所有“应用程序”(网站的每个部分)都有自己的关键字……所以我所需要做的就是添加到js数组上面添加更多的页面…

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

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

因此，如果我有一个url，如:

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

js脚本将取代/ads/部分，所以我的URL将结束

www.domain.com/ads/ p = 3923 /爸爸/ bla bla

然后我使用jquery bbq插件加载相应的页面…

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

2011-04-30 12:51:34

您可以使用隐藏的输入标记。我在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中，我们可以存储自定义属性，在属性名之前加上“data-”前缀

<p data-animal='dog'>这个动物是一只狗。检查文档

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

<p id='animal'>这个动物是一只狗

然后为上面的标签创建一个名为'breed'的属性，我们可以这样写:

$(" #动物”)。attr(“data-breed”、“哈巴狗”);

为了随时检索数据，我们可以这样写:

var breedtype = $（'#animal'）.data（'breed'）;

2019-06-01 13:52:49

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

另一种方法是用javascript设置属性。jQuery有一个很好的实用工具方法，也可以使用自己的方法。

2009-01-11 02:21:40

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

推荐文章

最新文章

标签