我正在做一个有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标记存储任意信息?


当前回答

为什么不利用已有的有意义的数据,而不是添加任意的数据呢?

例如,使用<a href="/articles/5/page-title" class="article-link">,然后你可以通过编程方式获得页面上的所有文章链接(通过classname)和文章ID(匹配regex /articles\/(\d+)/ against this.href)。

其他回答

你可以使用你自己的随机元素属性的data-前缀(<span data-randomname=" data goes here…"></span>),但这只在HTML5中有效。因此,浏览器可能会抱怨有效性问题。

你也可以使用<span style="display: none;">数据在这里…跨度< / >标记。但是这样你就不能使用属性函数了,如果css和js被关闭了,这也不是一个很好的解决方案。

但我个人更喜欢的是:

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

输入将在所有情况下被隐藏,属性是完全有效的,如果它在<form>标记内,它将不会被发送,因为它没有任何名称,对吗? 最重要的是,属性真的很容易记住,代码看起来很漂亮,很容易理解。你甚至可以在里面放一个id属性,这样你也可以很容易地用JavaScript访问它,并通过input.title访问键值对;input.value。

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

储存:储存某物:

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

检索数据:

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

这就是jQuery的全部内容,但是请查看jQuery文档以获得更多信息/示例。

在html中,我们可以存储自定义属性,在属性名之前加上“data-”前缀

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

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

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

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

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

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

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

只要您的实际工作是在服务器端完成的,那么为什么还要在输出中的html标记中使用自定义信息呢?在服务器上,你所需要知道的只是一个索引,不管它是什么类型的结构列表,都包含你的自定义信息。我觉得你把信息存错地方了。

我承认,不管多么不幸,在很多情况下,正确的解决方案并不是正确的解决方案。在这种情况下,我强烈建议生成一些javascript来保存额外的信息。

许多年后:

这个问题是在数据公布大约三年前提出的……随着html 5的出现,属性成为了一个有效的选项,所以事实已经发生了变化,我最初给出的答案不再相关。现在我建议改用数据属性。

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

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>

使用jquery,

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

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