如何存储某些HTML标记的任意数据
我正在制作一个由javascript提供的交互功能的页面。举个例子:链接发送一个AJAX请求来获取文章的内容，然后在div中显示数据。显然，在本例中，我需要每个链接存储额外的信息:文章的id。我处理它的方法是将该信息放在href链接中：
<a class="article" href="#5">然后，我使用jQuery查找a.article元素并附加适当的事件处理程序。(这里不要过于关注可用性或语义，这只是一个例子)
不管怎么说，这个方法是有效的，但是它有点点击，而且根本就不是可扩展的(如果smells函数有多个参数会发生什么呢？如果其中一些参数是可选的，该怎么办？)
直接显而易见的答案是在元素上使用属性。我是说，这就是他们的用处，对吧？(有点)。
<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标记存储任意的信息
回答 21
Stack Overflow用户
发布于 2009-01-11 02:16:50
您使用的是哪个版本的HTML？
在HTML5中，使用custom attributes prefixed with data-是完全有效的，例如
<div data-internalid="1337"></div>在XHTML中，这并不真正有效。如果是在XHTML1.1模式下，浏览器可能会抱怨它，但是在1.0模式下，大多数浏览器都会默默地忽略它。
如果我是你，我会遵循基于脚本的方法。您可以让它在服务器端自动生成，这样维护起来就不会很麻烦了。
Stack Overflow用户
发布于 2009-01-11 04:31:32
如果您已经在使用jQuery，那么您应该利用" data“方法，这是使用jQuery在dom元素上存储任意数据的推荐方法。
要存储某物：
$('#myElId').data('nameYourData', { foo: 'bar' });要检索数据：
var myData = $('#myElId').data('nameYourData');这就是它的全部内容，但请查看jQuery documentation以获取更多信息/示例。
Stack Overflow用户
发布于 2009-01-11 03:48:33
换句话说，我个人不会使用它，但它是有效的(确保您的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);https://stackoverflow.com/questions/432174
复制相似问题
腾讯云开发者
