为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

绝地无双 2019-08-09 16:20:34
如何为某些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标签存储任意信息?
查看完整描述

3 回答

?
胡子哥哥

TA贡献1825条经验 获得超6个赞

您使用的是哪个版本的HTML?

在HTML 5中,拥有带有数据前缀的自定义属性是完全有效的,例如

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

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

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


查看完整回答
反对 回复 2019-08-09
?
万千封印

TA贡献1891条经验 获得超3个赞

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

存储东西:

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

要检索数据:

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

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


查看完整回答
反对 回复 2019-08-09
?
慕田峪9158850

TA贡献1794条经验 获得超7个赞

换句话说,我个人不会使用它,但它可以工作(确保你的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);


查看完整回答
反对 回复 2019-08-09
  • 3 回答
  • 0 关注
  • 1001 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号