如何为某些HTML标记存储任意数据 [英] How to store arbitrary data for some HTML tags

问题描述

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

 < a class = articlehref =＃5> 
  

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

无论如何，这个方法可行，但它闻起来有点气味，并且根本不可扩展（如果click函数有多个参数会发生什么情况？如果其中一些参数是可选的，会发生什么？）

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

 < a articleid =5href =link / for / non-js-users。 HTML> 
  

在我的最近的问题我问过这种方法是否有效，结果表明我没有定义我自己的DTD（我不知道），那么不，它无效或不可靠。一个常见的反应是将数据放入类属性中（尽管这可能是因为我选择不好的例子），但是对我而言，这种感觉更加奇怪。是的，它在技术上是有效的，但它不是一个好的解决方案。

过去我使用的另一种方法是实际生成一些JS并将其插入到页面中< script> 标记，创建一个与该对象相关联的结构体。

  var myData = {
 link0：{
 articleId：5，
 target：'#showMessage'
 // etc ... 
}，
 link1：{
 articleId：13 
} 
}; 
 
< a href =...id =link0> 
  

但是这可能是一个很难保持的问题，通常很麻烦。

因此，要解决这个问题，如何为HTML标记存储任意信息？

解决方案

您使用的是哪个版本的HTML？ =https://www.w3schools.com/tags/att_global_data.asp =noreferrer>以数据为前缀的自定义属性，例如

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

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

如果我是你，我将遵循基于脚本的方法。你可以在服务器端自动生成它，这样它就不会在后面维护。

I'm making a page which has some interaction provided by javascript. Just as an example: links which send an AJAX request to get the content of articles and then display that data in a div. Obviously in this example, I need each link to store an extra bit of information: the id of the article. The way I've been handling it in case was to put that information in the href link this:

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

I then use jQuery to find the a.article elements and attach the appropriate event handler. (don't get too hung up on the usability or semantics here, it's just an example)

Anyway, this method works, but it smells a bit, and isn't extensible at all (what happens if the click function has more than one parameter? what if some of those parameters are optional?)

The immediately obvious answer was to use attributes on the element. I mean, that's what they're for, right? (Kind of).

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

In my recent question I asked if this method was valid, and it turns out that short of defining my own DTD (I don't), then no, it's not valid or reliable. A common response was to put the data into the class attribute (though that might have been because of my poorly-chosen example), but to me, this smells even more. Yes it's technically valid, but it's not a great solution.

Another method I'd used in the past was to actually generate some JS and insert it into the page in a <script> tag, creating a struct which would associate with the object.

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

But this can be a real pain in butt to maintain and is generally just very messy.

So, to get to the question, how do you store arbitrary pieces of information for HTML tags?

解决方案

Which version of HTML are you using?

In HTML 5, it is totally valid to have custom attributes prefixed with data-, e.g.

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

In XHTML, this is not really valid. If you are in XHTML 1.1 mode, the browser will probably complain about it, but in 1.0 mode, most browsers will just silently ignore it.

If I were you, I would follow the script based approach. You could make it automatically generated on server side so that it's not a pain in the back to maintain.

这篇关于如何为某些HTML标记存储任意数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！